SDScan:Flutter二维码扫描界面太丑？看这里就够了。

前言

---

这段时间一直在写Flutter的一个项目，作为一个才入门Flutter的小白，遇到的坑是多之又多，近来想做个二维码扫描界面。看了看网上常用的三方库，真心觉得UI简直不要太简陋，所以自己决定动手撸一个Flutter插件，简单实现一下。当然了，由于Android和Flutter的基础太差，可能会有很多Bug的存在，如果各位大佬有看到不符合规范的地方，欢迎指导批评。

参考库如下所示。安卓部分是基于 zxing-android-embedded 这个库，iOS是参考 ZFScan 改造的。

Android部分：zxing-android-embedded
iOS部分：ZFScan

简单上手

---

首先我们在 pubspec.yaml 文件中导入下面内容。然后再执行 flutter pub get 命令。

dependencies:
  flutter_dong_scan: ^1.0.1

然后我们需要在Android的 AndroidManifest.xml 和 iOS 的 info.plist 添加权限请求， 具体如下所示。

这里要说明一下iOS部分添加权限需要注意的问题，如果你的App想要上线AppStore,我建议你把 “该Demo想使用您的相机” 这句话改为更加详细的阐述，不然挨拒那是必然的。UIViewControllerBasedStatusBarAppearance 这个属性为什么要设置，这里我需要说明下，我为UI的统一把状态栏前景色改为白色，所以需要设置这个属性，可以不设置跟随整体主色走。

Android 部分

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.FLASHLIGHT" />
    <uses-permission android:name="android.permission.CAMERA" />

    <application>
        .....
    </application>

</manifest>

iOS部分

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>NSCameraUsageDescription</key>
    <string>该Demo想使用您的相机</string>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>

    ......

</dict>
</plist>

上面配置完成之后，我们导入SDScan,如下所示。

import 'package:flutter_dong_scan/scan.dart';

然后我们就可以如下进行调用了。

      ScanConfig scanConfig = ScanConfig();
      SDScan scan = SDScan().setScanEventListener((dynamic codeString){
          print("扫描结果:" + codeString);
      });
      scan.startScan(config: scanConfig);

那么我们想定制我们自己的UI该怎么办呢？我们只需要配置ScanConfig对象即可。这里把可配置选项说明一下，如下所示。

属性	说明	默认值
maskColorAlpha	外部遮罩的透明度，暂不可用	0.3
maskRatio	遮罩框相对比例	0.68
returnStyle	返回按钮的样式,ReturnStyleExit(值为0) ReturnStyleCancle(值为1)	0
titeColor	整体的主色，会影响扫描线和四个边角的颜色	"#4bde2b"
title	标题的文字	"扫一扫"
hintString	底部提示文字	"将二维码放入框内，即可自动扫描"

具体效果如下所示。

结语

---

OK,简单实用就说到这里啦，如果有任何问题或者想要功能改进，欢迎给骚栋留言，感谢。