Flutter扫码插件持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情扫

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

扫码功能在现如今的App中已经是很常见的，很多App都会有扫码功能，因为业务需求，我需要在Flutter项目的App内做一个生成二维码跟扫码的功能。以下是实现扫码功能后的效果图，图如下所示：

微信图片_20220614165513.jpg

在Flutter插件库内，扫码插件有很多种，像barcode_scan扫码插件库(已停止维护)、qrscan扫码插件库、qr_code_scanner扫码插件库等等，有很多扫码插件供我们选择，我这里选择的是scan插件库1.6.0版本的。

首先在pubspec.yaml文件夹内引入:

  scan: ^1.6.0

接下来我们创建一个scanCode.dart文件，在该文件头部导入scan包：

import 'package:scan/scan.dart';

这样我们就已经可以使用scan二维码扫码插件了，接下来就是写我们的界面代码,以下便是总的代码逻辑:


class Logic {
  ScanController controller = ScanController();
}

class Qrscan extends StatefulWidget {
  const Qrscan({Key? key}) : super(key: key);

  @override
  State<Qrscan> createState() => _QrscanState();
}

class _QrscanState extends State<Qrscan> {
  ScanController controller = ScanController();

//String result = await Scan.parse(imagePath);图片识别
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    return Stack(
      alignment: Alignment.center,
      children: [
        ScanView(
          controller: controller,
          scanAreaScale: .6,
          scanLineColor: const Color(0xFF00ECD7),
          onCapture: (data) {
            print('data: $data');

            Get.back(result: data);
          },
        ),
        AppBar(
            elevation: 0,
            title: Text(
              '扫描二维码',
              style: TextStyle(fontSize: fontLarge),
            ),
            centerTitle: true,
            backgroundColor: Colors.transparent,
            leading: GestureDetector(
              child: Container(
                color: Colors.transparent,
                child: Icon(
                  Icons.arrow_back_ios,
                  color: Colors.white,
                  size: font20,
                ),
              ),
              onTap: () {
                Get.back();
              },
            )),
        Positioned(
            bottom: 0.15.sh,
            child: Wrap(
              spacing: 0.3.sw,
              children: [
                Icon(
                  Icons.photo,
                  size: 50.r,
                ),
                Icon(
                  Icons.camera_alt,
                  size: 50.r,
                ),
              ],
            ))
      ],
    );
  }
}

首先，我们创建了一个状态组件Qrscan,并在状态管理的_QrscanState内，创建了扫码插件提供的对象controller。接下来我们设置了页面状态栏的颜色:

 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

接下来我们通过Stack组件，创建了一个层叠布局，并在其children子组件容器内容，使用了Scan插件的ScanView组件,该组件有个onCapture属性，我们扫码后，二维码的相关数据会通过该回调函数传入给我们使用，我们便可以在该函数内处理相关的逻辑:

ScanView(
    controller: controller,
    scanAreaScale: .6,
    scanLineColor: const Color(0xFF00ECD7),
    onCapture: (data) {
        //逻辑处理
    },
),

而AppBar则是处于页面头部的，我们在其内部设置了页面的标题，很背景色等相关属性。最后我们通过Positioned定位设置了两个图标位于扫码区域下方。好嘞，到这里就介绍完Flutter扫码功能了，实现的效果如下图:

微信图片_20220614165513.jpg