How do I open windows print popup in my flutter web application

Question

How do I open windows print popup in my flutter web application

358 Views Asked by Jvictororiz At 27 January 2023 at 19:21

I have a web application where the user answered a questionnaire, I managed to convert all this widget that I created into an image, now I would like to open that chrome popup to print only that specific image that I created

Here is the code example where I can convert the entire widget into an image, now I would just like to print this image by making the Chrome browser do what it does with the shortcut ctrl + p, however, passing my image instead of the entire screen

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:login_example/presentation/component/custom_input.dart';
import 'package:login_example/presentation/component/loading_button.dart';
import 'package:widgets_to_image/widgets_to_image.dart';

class ApplicationExapmle extends StatelessWidget {
  const ApplicationExapmle({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    WidgetsToImageController controller = WidgetsToImageController();

    return WidgetsToImage(
      controller: controller,
      child: Column(
        children: [
          Center(
            child: Text("test"),
          ),
          SizedBox(height: 20),
          Center(
            child: CustomInput(controller: TextEditingController()),
          ),
          LoadingButton(onTap: () async {
            var image = await controller.capture();


          }, textButton: "save")
        ],
      ),
    );
  }
}

I tried using the print lib:https://pub.dev/packages/printing, but what I really wanted was to print this image that I managed to convert

Original Q&A

There are 1 best solutions below

**Zeeshan Ali** · Answer 1 · 2024-01-22T06:13:28.710000

Here is the code I am using to generate a QR Code image and get base64 string out of it and then open the print window for that image only in flutter web, you can tweak it to your needs:

Future<void> _generateAndPrintQrCode(String pin) async {
// Generate QR code image

// Convert widget to image
final base64Image = await AppUtils.toQrImageData(pin);

// // Create a printable HTML document
// Create a printable HTML document
final printableDocument = '''
    <html>
      <head>
        <title>ZYSKY Partner Pin</title>
      </head>
      <body>
        <img src="data:image/png;base64,$base64Image" alt="qr"/>
        <script>
          // Automatically trigger the print dialog once the image is loaded
          window.onload = function() {
            window.print();
            window.onafterprint = function() {
              window.close(); // Close the window after printing
            };
          };
        </script>
      </body>
    </html>
  ''';
// Create a Blob from the HTML content
final blob = html.Blob([printableDocument], 'text/html');

// Create an Object URL for the Blob
final url = html.Url.createObjectUrlFromBlob(blob);

// Open a new window with the printable document
final newWindow = html.window.open(url, '_blank');

// Revoke the Object URL to free resources
html.Url.revokeObjectUrl(url);
}

Here is "toQrImageData" function:

    static Future<String?> toQrImageData(String text) async {
      try {
        final image = await QrPainter(
        data: text,
        version: QrVersions.auto,
        gapless: false,
        ).toImage(300);
        final a = await image.toByteData(format: ui.ImageByteFormat.png);
        return a !=null ? base64Encode(a.buffer.asUint8List()) : null;
      } catch (e) {
        return null;
      }
    }

I am using qr_flutter package for qr code related work.

How do I open windows print popup in my flutter web application

There are 1 best solutions below

Related Questions in FLUTTER

Related Questions in DART

Related Questions in GOOGLE-CHROME

Related Questions in WEB

Related Questions in FLUTTER-WEB

Trending Questions

Popular # Hahtags

Popular Questions