Flutter 实现扫码

目次

实现效果

实现步调

1.引入扫码依赖

这里利用的是qr_code_scanner
dependencies:  qr_code_scanner: ^1.0.12.添加代码

扫码页面的代码如下：
class ScanQrCodePage extends StatefulWidget {  const ScanQrCodePage({Key? key}) : super(key: key);  @override  State<ScanQrCodePage> createState() => _ScanQrCodePageState();}class _ScanQrCodePageState extends State<ScanQrCodePage> {  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');  Barcode? result;  QRViewController? controller;  @override  void reassemble() {    super.reassemble();    if (Platform.isAndroid) {      controller!.pauseCamera();    } else if (Platform.isIOS) {      controller!.resumeCamera();    }  }  void _onQRViewCreated(QRViewController controller) {    controller.resumeCamera();    setState(() {      this.controller = controller;    });    controller.scannedDataStream.listen((scanData) {      setState(() {        result = scanData;        controller?.dispose();        Get.back(result: scanData?.code);      });    });  }  @override  void dispose() {    controller?.dispose();    super.dispose();  }  @override  Widget build(BuildContext context) {      return Scaffold(      appBar: WidgetFactory.createAppBar("扫码"),      body: Container(        child: QRView(          key: qrKey,          onQRViewCreated: _onQRViewCreated,        ),      ),    );  }}吸收扫码效果的关键代码如下(注：这里我跳转路由利用的是三方库get)：
GestureDetector(                    onTap: () async {                      var scancode = await Get.toNamed(PageNameData.PAGE_SCANQRCODEPAGE);                      setState(() {                        _unameController.text = scancode;                      });                      print(future);                    },                    child: Icon(Icons.qr_code,color: Colors.black,),                  )3.注意事项

一开始我是直接利用的文档提供的案例代码，厥后发现当扫完码返回的时间会出现标题，就是直接返回好几个页面，厥后在_onQRViewCreated中修改了下案例代码，就是在返回之前调用controller?.dispose()
void _onQRViewCreated(QRViewController controller) {    controller.resumeCamera();    setState(() {      this.controller = controller;    });    controller.scannedDataStream.listen((scanData) {      setState(() {        result = scanData;        //返回之前调用dispose()        controller?.dispose();        Get.back(result: scanData?.code);      });    });  }别的另有偶然候进入的时间页面是黑屏，必要点一下才气出现画面，这里我也调解了下，就是在_onQRViewCreated中到场controller.resumeCamera()激活一下相机
void _onQRViewCreated(QRViewController controller) {    //激活相机，否则偶然候会黑屏    controller.resumeCamera();    setState(() {      this.controller = controller;    });    controller.scannedDataStream.listen((scanData) {      setState(() {        result = scanData;        //返回之前调用dispose()        controller?.dispose();        Get.back(result: scanData?.code);      });    });  }