Question

我尝试将 qr 代码导出到 png 图像，但它不起作用，因为 Flutter 告诉我：“RenderPadding”类型不是“RenderRepaintBoundary”类型的子类型。有谁知道我如何将这些类型转换在一起？或者我怎样才能使代码工作？这是使用的函数

@override
  Future<void> _captureAndSharePng() async {
    try {
      RenderRepaintBoundary boundary =
          globalKey.currentContext.findRenderObject();
      var image = await boundary.toImage();
      ByteData byteData = await image.toByteData(format: ImageByteFormat.png);
      Uint8List pngBytes = byteData.buffer.asUint8List();

      final tempDir = await getTemporaryDirectory();
      final file = await new File('${tempDir.path}/image.png').create();
      await file.writeAsBytes(pngBytes);

      final channel = const MethodChannel('channel:me.simo.share/share');
      channel.invokeMethod('shareFile', 'assets.png');
    } catch (e) {
      print(e.toString());
    }
  }

这里是所有代码：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'dart:ui';
import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';
import 'package:team3/Common/navigate.dart';
import 'package:team3/qrCode/detail.dart';

class Generate extends StatefulWidget {
  @override
  _GenerateState createState() => _GenerateState();
}

class _GenerateState extends State<Generate> {
  String qrData = "SHS HTW App";

  GlobalKey globalKey = new GlobalKey();
  final TextEditingController qrText = TextEditingController();

  @override
  Future<void> _captureAndSharePng() async {
    try {
      RenderRepaintBoundary boundary =
          globalKey.currentContext.findRenderObject();
      var image = await boundary.toImage();
      ByteData byteData = await image.toByteData(format: ImageByteFormat.png);
      Uint8List pngBytes = byteData.buffer.asUint8List();

      final tempDir = await getTemporaryDirectory();
      final file = await new File('${tempDir.path}/image.png').create();
      await file.writeAsBytes(pngBytes);

      final channel = const MethodChannel('channel:me.simo.share/share');
      channel.invokeMethod('shareFile', 'assets.png');
    } catch (e) {
      print(e.toString());
    }
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QrCode Generate'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.share),
            onPressed: () {
              _captureAndSharePng();
            },
          ),
        ],
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                child: Expanded(
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(50, 10, 10, 180),
                    key: globalKey,
                    child: QrImage(
                      //place where the qr image will be shown
                      data: qrData,
                      size: 250,
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 40.0,
              ),
              Text("get your data/ linked to the QR Code"),
              TextField(
                //place where we enter the text od data
                controller: qrText,
                decoration: InputDecoration(
                  hintText: "Enter the data/Link",
                ),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(40, 20, 40, 20),
                child: FlatButton(
                  padding: EdgeInsets.all(15.0),
                  child: Text("generate qr code"),
                  //what should ahppen when we press the button
                  onPressed: () {
                    if (qrText.text.isEmpty) {
                      setState(() {
                        qrData = "";
                      });
                    } else {
                      qrData = qrText.text;
                    }
                  },
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0),
                      side: BorderSide(color: Colors.green, width: 3.0)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

将您的 QRImage 小部件包装在 RepaintBoundary 中并尝试。

RepaintBoundary(
              key: qrKey, 
              child: QrImage(
                data: generateQRContrller.qrData.value, 
                backgroundColor: CupertinoColors.white,
              )
          )

Future<void> _captureAndSharePng(content) async {
try {
  RenderRepaintBoundary boundary = qrKey.currentContext.findRenderObject();
  var image = await boundary.toImage();
  ByteData byteData = await image.toByteData(format: ImageByteFormat.png);
  Uint8List pngBytes = byteData.buffer.asUint8List();

  final tempDir = await getExternalStorageDirectory();
  final file = await new File('${tempDir.path}/shareqr.png').create();
  await file.writeAsBytes(pngBytes);

  await Share.shareFiles([file.path], text: content);
} catch (e) {
  print(e.toString());
}

}

https://github.com/theyakka/qr.flutter/issues/79

如何将 qrcode 导出到带有颤振的图像 png

1 个答案: