Save and print generated barcode as image

Question

I am using the barcode_widget to generate both barcode and 2d QR code. But I also need to print and save the codes.

My Current code for generating bar code and qr code is as below:

    Center(
      child: BarcodeWidget(
        data: widget.product.productId!,
        barcode: Barcode.code128(),
        width: 200,
        height: 200,
        drawText: false,
      ),
    ),

and

    BarcodeWidget(
      data: widget.product.productId!,
      barcode: Barcode.qrCode(),
    ),

Both are inside a Column and I have two buttons called save and print. So how can I save and print the generated codes?

Answer 1

You can use RepaintBoundary
Follow these steps:

1. Create a key.

  GlobalKey _screenShotKey = GlobalKey();

2. Wrap the barcode in a repaint boundary and attach the key

RepaintBoundary(
 key: _screenShotKey,
 child: Center(
      child: BarcodeWidget(
        data: widget.product.productId!,
        barcode: Barcode.code128(),
        width: 200,
        height: 200,
        drawText: false,
      ),
    )
)

3. Import dart:ui as ui

import 'dart:ui' as ui;

4. Create a method to take a screenshot of the widget and save it.

  Future<File> takeScreenshot() async {
    RenderRepaintBoundary boundary =
        _screenShotKey.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    final tempPath = (await getTemporaryDirectory()).path;
    final path = tempPath + "qr.png";
    File imgFile = File(path);
    return imgFile.writeAsBytes(pngBytes);
  }

5. To save in gallery/photos app; Use GallerySaver package

 void save() async {
    takeScreenshot().then((value) async {
      bool saved = await GallerySaver.saveImage(value.path);
      print(saved);
    }).catchError((onError) {});
  }