title: flutter capture the widget to image and then create PDF file to printer
body: <p>My flutter app captures the widget to image and then creates PDF file to printer, but it shows ridiculous result as below picture.</p>
  
  <p>Let me know if you have any better method to print Chinese character and qr image to a receipt (bluetooth printer with paper width 75mm)</p>
  
  <p>Here with the widget:</p>
  
  <pre><code>RepaintBoundary(
        key: _renderObjectKey,
        child: ListView(
          children: &lt;Widget&gt;[
            Form(
              key: tableNumberFormKey,
              child:
              ListTile(
                title: TextFormField(
                  initialValue: "",
                  style: TextStyle(fontSize: 48.0),
                  textAlign: TextAlign.center,
                  maxLength: 4,
                  keyboardType: TextInputType.phone,
                  onSaved: (val) =&gt; inputTableNumber = val.toString(),
                  validator: (val) =&gt; val.isEmpty ? '' : null,
                  decoration: new InputDecoration(
                    labelText: "輸入檯號",
                    hintText: "例如：12",
                  ),
                ),
              ),
            ),
            FlatButton(
              textColor: Colors.blueAccent,
              child: Text(
                "列印 QR CODE",
                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0),
              ),
              color: Colors.transparent,
              onPressed: () {
                _showQRandPrint();
                SystemChannels.textInput.invokeMethod('TextInput.hide');
              },
            ),
            inputTableNumber == ""
                ? ListTile(title: Text(''),)
                : Center(
              child: QrImage(
                data: qrString,
                size: 300.0,
                version: 10,
                backgroundColor: Colors.white,
              ),
            ),
  
          ],
        ),
      );
  </code></pre>
  
  <p>Here with the function to create image and pdf to printer.</p>
  
  <pre><code>void _showQRandPrint() {
      final FormState form = tableNumberFormKey.currentState;
  
      if (form.validate()) {
        form.save();
  
        _getWidgetImage().then((img) {
          final pdf = new PDFDocument();
          final page = new PDFPage(pdf, pageFormat: PDFPageFormat(75.0, 100.0));
          final g = page.getGraphics();
          final font = new PDFFont(pdf);
  
          PDFImage image = new PDFImage(
              pdf,
              image: img,
              width: 75,
              height: 100);
          g.drawImage(image, 0.0, 0.0);
  
          Printing.printPdf(document: pdf);
        });
  
      }
      else {
        setState(() {
          inputTableNumber = "";
        });
      }
    }
  
    Future&lt;Uint8List&gt; _getWidgetImage() async {
      try {
        RenderRepaintBoundary boundary =
        _renderObjectKey.currentContext.findRenderObject();
        ui.Image image = await boundary.toImage(pixelRatio: 3.0);
        ByteData byteData =
        await image.toByteData(format: ui.ImageByteFormat.png);
        var pngBytes = byteData.buffer.asUint8List();
        var bs64 = base64Encode(pngBytes);
        debugPrint(bs64.length.toString());
        return pngBytes;
      } catch (exception) {}
    }
  </code></pre>
  
  <p>result picture preview:</p>
  
  <p><a href="https://i.stack.imgur.com/0D8Nd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0D8Nd.jpg" alt="enter image description here"></a></p>
  
  <p>The widget on the screen is:</p>
  
  <p><a href="https://i.stack.imgur.com/lxjbo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lxjbo.png" alt="enter image description here"></a></p>