Flutter二维码扫描（支持相册中的二维码）

flutter项目中使用到了二维码扫描，尝试了很多插件，有的很简陋，简陋到扫描页面无法自定义，有的很详尽，使用起来很麻烦。一个一个的尝试，终于遇到了一个满意的插件：scan。

先上效果图：

扫码.png

scan使用起来非常方便，也很容易自定义扫描页面，非常棒！

使用步骤开启：

1.在pubspec.yaml文件中引入插件：

scan: ^1.5.0
images_picker: ^1.2.9
permission_handler: ^8.3.0

2.开始自定义扫描页面

class ScanPage extends StatelessWidget {

  final String phoneNumber;
  ScanPage({Key? key, required this.phoneNumber}) : super(key: key);

  IconData lightIcon = Icons.flash_on;
  final ScanController _controller = ScanController();

  void getResult(String result, BuildContext context){
    //TODO
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: IAppBar(
          "扫码"
      ),
      body: Stack(
          children: [ScanView(
            controller: _controller,
            scanLineColor: Color(0xFF4759DA),
            onCapture: (data) {
              _controller.pause();
              getResult(data,context);
            },
          ),
            Positioned(
              left: WH.w(100),
              bottom: WH.w(100),
              child: StatefulBuilder(
                builder: (BuildContext context, StateSetter setState) {
                  return MaterialButton(
                      child: Icon(lightIcon,size: WH.w(80),color: Color(0xFF4759DA),),
                      onPressed: (){
                        _controller.toggleTorchMode();
                        if (lightIcon == Icons.flash_on){
                          lightIcon = Icons.flash_off;
                        }else {
                          lightIcon = Icons.flash_on;
                        }
                        setState((){});
                      }
                  );
                },
              ),
            ),
            Positioned(
              right: WH.w(100),
              bottom: WH.w(100),
              child: MaterialButton(
                  child: Icon(Icons.image,size: WH.w(80),color: Color(0xFF4759DA),),
                  onPressed: () async {
                    List<Media>? res = await ImagesPicker.pick(
                      count: 1,
                      maxSize: 1024
                    );
                    if (res != null) {
                      _controller.pause();
                      Media image = res.first;
                      String? result = await Scan.parse(image.path);
                      if(result != null){
                        getResult(result,context);
                      }
                    }
                  }
              ),
            ),
          ]
      ),
    );
  }
}

3.遇到小bug，这样第一次进入询问权限的时候，会卡顿，导致第一次扫码会黑屏，于是，我进入之前就开始请求权限，有权限后我再进入扫描页面。这个用的是permission_handler插件。

  scan() async {
    var status = await Permission.camera.request();
    if(status.isGranted){
      App.go(
          context,
          ScanPage(widget.countyCode,widget.phoneNumber)
      );
    }
  }

这样，既方便，又好看。真是个不错的插件，为插件作者打call！

插件地址：

https://pub.dev/packages/scan/install