Layout issue when printing on IOS

[shinxxxxwon]

Describe the bug
On Android, the layout is normal when printing, but on IOS, the layout is enlarged to create a PDF.

To Reproduce
Code snippet to reproduce the behavior:

///PdfPageFormat.a4
static const PdfPageFormat a4 =
      PdfPageFormat(2480, 3508);

///printing Method
_generatedPdf(PdfPageFormat format, BuildContext context, Size size, HttpCommunicate httpCommunicate) async {

    DrawScore drawScore = DrawScore();
    await drawScore.makePDF(context.read<PDFProvider>().uinPdfData!);

    // bool bRes = await Printing.layoutPdf(onLayout: (format) async => pdf.save());
    final output = await getTemporaryDirectory();
    final file = File('${output.path}/score.pdf');
    await Printing.layoutPdf(onLayout: (_) => file.readAsBytesSync());
  }

Expected behavior

Screenshots

Flutter Doctor

[✓] Flutter (Channel stable, 2.10.2, on macOS 13.2.1 22D68 darwin-arm, locale ko-KR)
    • Flutter version 2.10.2 at /Users/sinjeong-won/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 097d3313d8 (1년, 1달 전), 2022-02-18 19:33:08 -0600
    • Engine revision a83ed0e5e3
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/sinjeong-won/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] VS Code (version 1.76.2)
    • VS Code at /Users/sinjeong-won/iCloud Drive(아카이브)/Desktop/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] VS Code (version 1.73.1)
    • VS Code at /Users/sinjeong-won/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] VS Code (version 1.76.2)
    • VS Code at /Users/sinjeong-won/iCloud Drive(아카이브) - 1/Desktop/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] Connected device (3 available)
    • SM T510 (mobile)     • R54N100K7HW               • android-arm    • Android 11 (API 30)
    • 신정원의 iPhone (mobile) • 00008020-001C646C3601002E • ios            • iOS 15.5 19F77
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 111.0.5563.146

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Desktop (please complete the following information):

• iOS
• Android
• Browser
• Windows
• Linux

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

I used the print package on 'android' and 'ios'. In Android, it is normally created and printed according to the size specified in PdfPageFormat.a4 (2480 * 3508), but in IOS, PDF is created and printed out of layout as shown in the figure above. Is there a part that needs to be modified separately when printing on iOS?

[bksbora]

Can you try this :

  @override
  Widget build(BuildContext context) {
//? Klasörlerme

    const double inch = 72.0;
    const double cm = inch / 2.54;
    return Container(
        height: Get.height,
        color: AppTheme().kirlibeyaz,
        child: PdfPreview(
          build: (format) => _generatePdf(
// ? Veriyi Pdf'e Aktarma!
// Margin
            const PdfPageFormat(21.0 * cm, 29.7 * cm, marginAll: 0.5 * cm),
          ),
        ));
  }

[shinxxxxwon]

This is the default value for the library.

static const PdfPageFormat a4 = (21.0 * cm, 29.7 * cm, marginAll: 0.5 * cm);

However, since I am creating and printing a pdf within the app, I have modified the size of 'a4' as shown below.

static const PdfPageFormat a4 = PdfPageFormat(2480, 3508);

As you said in the answer, if you change the size to 'PdfPageFormat(21.0 * cm, 29.7 * cm, marginAll: 0.5 * cm)' when creating and printing 'pdf', it will be normal when outputting 'a4'.

The question here is that the value of PdfPageFormat.a4 is changed to (2480, 3508) to create and print a pdf, but why is it not applied in the output?

[DavBfr]

It is totally applied to the output. But ultimately you don't control the paper format that's physically in the printer tray. Especially the minimal margins The printer can go. The layout function will try to do that.

[shinxxxxwon]

This is a real device screenshot of my app. We will show both screens, pdfView and printing.
pdf displayed on the main screen of my app

Screen shown before printing in printing

All sizes are static const PdfPageFormat a4 =PdfPageFormat(2480, 3508);
This is a pdf file created by specifying.

However, if you run the app with the value of PdfPageFormat.a4 as (21.0 * cm, 29.7 * cm, marginAll: 0.5 * cm);, both pdfView and printing are normal.

The print is a screenshot without connection.

[shinxxxxwon]

I tested it on the same printer with the same file, but it's normal on Android, but still an enlarged layout on IOS.

[shinxxxxwon]

I built the app with test code.

 pdfWidget.Document scorePdf = pdfWidget.Document(version: PdfVersion.pdf_1_5, compress: true);
    scorePdf.addPage(
        pdfWidget.Page(
            pageFormat: PdfPageFormat.a4, ///2480 * 3508
            build: (pdfWidget.Context pContext){
              return pdfWidget.Stack(
                  children: [
                    for(int i=0; i<10; i++)
                      pdfWidget.Positioned(
                        top: 220.0 * i,
                        left: 100,
                        child: pdfWidget.Container(
                          alignment: pdfWidget.Alignment.center,
                          child: pdfWidget.Text(
                            'TEST Code!!',
                            style: pdfWidget.TextStyle(
                              color: PdfColor.fromInt(0xFF000000),
                              fontSize: 60,
                              font: context.read<CustomFontProvider>().SOURCE_HANSANS_MEDIUM,
                              fontWeight: pdfWidget.FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                  ]
              );
            }
        )
    );

    File testFile = File('${output.path}/testFile.pdf');
    testFile.writeAsBytesSync(await scorePdf.save());

   await Printing.layoutPdf(onLayout: (_) => testFile.readAsBytesSync());

In Android, 'pdf' is normally shown in printing, but in ios, it is shown as a blank page. Do I need to specify the format once again in ios?

[bksbora]

I didn't understand so well ,explanation wasn't so clear for me . I'm sorry.
I can not test in IOS right now. But i tried to give huge dimensions to try. I got blank page then switched to landscape then verticalscape, it appeared. ** i didn't printed out.

[bksbora]

I guess you are changing the size because of your widget doens't fit a page and causes can not create more than 20 pages error etc.
If your physical printer do not print that size , we can change our vision to solve this problem and try other options like divide the widget or give size to the image . Hope i can be helpful for you .

[shinxxxxwon]

Thanks for your answer.

I don't think it's a clear solution to the problem, but if you modify the code below, you can see that the layout changes on the 'printing' screen. I haven't solved it yet, but I'll try.

 override public func drawPage(at pageIndex: Int, in _: CGRect) {
        let ctx = UIGraphicsGetCurrentContext()
        let page = pdfDocument?.page(at: pageIndex + 1)
           ctx?.scaleBy(x: 1.0, y: -1.0)
           ctx?.translateBy(x: 0.0, y: -paperRect.size.height)
        if page != nil {
            ctx?.drawPDFPage(page!)
        }
    }

I fixed it by modifying the parameters of ctx?.scaleBy(x: , y: ) and ctx?.translateBy(x: , y: ). But I don't think this is a good way. I need to do some more research on the code. I won't close the issue for sharing and discussing better ways!

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[github-actions]

Closing this stale issue because it has no activity.