1. Toy模板网首页
  2. > Toy博客

flutter开发实战-flutter二维码条形码扫一扫功能实现

9月前 作者：BruceGerGer 分类：Toy博客 阅读(45) 违法举报

这篇具有很好参考价值的文章主要介绍了flutter开发实战-flutter二维码条形码扫一扫功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

flutter开发实战-flutter二维码条形码扫一扫功能实现

flutter开发实战-flutter二维码扫一扫功能实现，要使用到摄像头的原生的功能，使用的是插件：scan

效果图如下

flutter开发实战-flutter二维码条形码扫一扫功能实现,移动开发,flutter开发实战,flutter,flutter,扫一扫,二维码,条形码

一、扫一扫插件scan

  # 扫一扫
  scan: ^1.6.0

1.1 iOS权限设置

<key>NSCameraUsageDescription</key>
<string>Your Description</string>

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

1.2 android权限设置

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

<application>
  <meta-data
    android:name="flutterEmbedding"
    android:value="2" />
</application>

1.3 使用ScanView的widget

ScanController controller = ScanController();
String qrcode = 'Unknown';

Container(
  width: 250, // custom wrap size
  height: 250,
  child: ScanView(
    controller: controller,
// custom scan area, if set to 1.0, will scan full area
    scanAreaScale: .7,
    scanLineColor: Colors.green.shade400,
    onCapture: (data) {
      // do something
    },
  ),
),

扫一扫Widget使用ScanController来做响应的控制

暂停/恢复camera

controller.pause();
controller.resume();

识别图片的二维码结果

String result = await Scan.parse(imagePath);

闪光灯切换

controller.toggleTorchMode();

二、代码实现

实现自定义扫码的appBar

class QrScanAppBar extends StatefulWidget {
  const QrScanAppBar({
    Key? key,
    required this.toolbarHeight,
    this.elevation,
    this.backgroundColor,
    this.leadingWidget,
    this.trailingWidget,
    this.centerWidget,
    this.brightness,
    this.padding, this.barPadding,
  }) : super(key: key);

  final double toolbarHeight;
  final double? elevation;
  final Color? backgroundColor;
  final Widget? leadingWidget;
  final Widget? trailingWidget;
  final Widget? centerWidget;
  final Brightness? brightness;
  final EdgeInsetsGeometry? padding;
  final EdgeInsetsGeometry? barPadding;

  @override
  State<QrScanAppBar> createState() => _QrScanAppBarState();
}

class _QrScanAppBarState extends State<QrScanAppBar> {
  @override
  Widget build(BuildContext context) {
    final SystemUiOverlayStyle overlayStyle =
        widget.brightness == Brightness.dark
            ? SystemUiOverlayStyle.light
            : SystemUiOverlayStyle.dark;

    Widget leadingWidget = (widget.leadingWidget ?? Container());
    Widget centerWidget = (widget.centerWidget ?? Container());
    Widget trailingWidget = (widget.trailingWidget ?? Container());

    return AnnotatedRegion<SystemUiOverlayStyle>(
      //套AnnotatedRegion是为了增加状态栏控制
      value: overlayStyle,
      child: Material(
        //套Material是为了增加elevation
        elevation: widget.elevation ?? 0,
        color: Colors.transparent,
        child: Container(
          padding: widget.padding,
          height: widget.toolbarHeight + ScreenUtil().statusBarHeight,
          decoration: BoxDecoration(
            color: widget.backgroundColor,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: ScreenUtil().statusBarHeight,
              ),
              Expanded(
                child: Container(
                  padding: widget.barPadding,
                  height: widget.toolbarHeight,
                  alignment: Alignment.center,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        height: widget.toolbarHeight,
                        child: leadingWidget,
                      ),
                      Expanded(
                        child: Container(
                          alignment: Alignment.center,
                          height: widget.toolbarHeight,
                          child: centerWidget,
                        ),
                      ),
                      Container(
                        height: widget.toolbarHeight,
                        child: trailingWidget,
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

实现扫一扫界面

class QrScanPage extends StatefulWidget {
  const QrScanPage({Key? key, this.arguments}) : super(key: key);

  final Object? arguments;

  @override
  State<QrScanPage> createState() => _QrScanPageState();
}

class _QrScanPageState extends State<QrScanPage> {
  ScanController scanController = ScanController();
  String qrcode = 'Unknown';
  bool torchOn = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    scanController.pause();
    super.dispose();
  }

  void changedTorchMode() {
    scanController.toggleTorchMode();
    if (torchOn == true) {
      torchOn = false;
    } else {
      torchOn = true;
    }
    setState(() {});
  }

  void refreshScan() {
    scanController.resume();
  }

  // controller.resume();
  // controller.pause();
  // String result = await Scan.parse(imagePath);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          buildQrScanView(context),
          Positioned(
            child: buildAppBar(context),
          ),
        ],
      ),
    );
  }

  Widget buildQrScanView(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    double scanW = width * 0.75;
    double scanMY = (height - scanW) / 2.0 + scanW + 15.0;

    return Container(
          alignment: Alignment.center,
          child: Stack(
            alignment: Alignment.center,
            children: [
              ScanView(
                controller: scanController,
                // custom scan area, if set to 1.0, will scan full area
                scanAreaScale: 0.75,
                scanLineColor: Colors.green.shade400,
                onCapture: (data) {
                  // do something
                  LoggerManager().debug("onCapture:${data}");
                  openQrScanWebPage(data);
                },
              ),
              Positioned(
                top: scanMY,
                child: buildOption(context, scanMY),
              ),
            ],
          ),
        );
  }

  Widget buildAppBar(BuildContext context) {
    return QrScanAppBar(
      toolbarHeight: 44.0,
      backgroundColor: Colors.transparent,
      padding: EdgeInsets.symmetric(horizontal: 10.0),
      barPadding: EdgeInsets.symmetric(vertical: 4.0),
      leadingWidget: Container(
        alignment: Alignment.center,
        child: QrscanButton(
          bgColor: ColorUtil.hexColor(0xA9A9A9),
          bgHighlightedColor: ColorUtil.hexColor(0xf0f0f0),
          borderColor: Colors.transparent,
          onPressed: () {
            navigatorBack();
          },
          borderRadius: 18.0,
          height: 36.0,
          width: 36.0,
          child: ImageHelper.wrapAssetAtImages(
            "icons/ic_scan_navback.png",
            width: 36.0,
            height: 36.0,
            fit: BoxFit.fill,
          ),
        ),
      ),
      centerWidget: Text(
        S.of(context).qrScan,
        textAlign: TextAlign.center,
        softWrap: true,
        style: TextStyle(
          fontSize: 17,
          color: ColorUtil.hexColor(0xffffff),
          fontWeight: FontWeight.w600,
          fontStyle: FontStyle.normal,
          decoration: TextDecoration.none,
        ),
      ),
      trailingWidget: Container(
        width: 32.0,
        height: 32.0,
      ),
    );
  }

  Widget buildOption(BuildContext context, double originY) {
    return Container(
      height: ScreenUtil().screenHeight - originY,
      width: ScreenUtil().screenWidth,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            width: 300.0,
            child: Text(
              S.of(context).qrScanBottomTip,
              textAlign: TextAlign.center,
              softWrap: true,
              style: TextStyle(
                fontSize: 15,
                fontWeight: FontWeight.w500,
                fontStyle: FontStyle.normal,
                color: Colors.white,
                decoration: TextDecoration.none,
              ),
            ),
          ),
          SizedBox(
            height: 25.0,
          ),
          buildButtons(context),
          Expanded(
            child: Container(),
          ),
        ],
      ),
    );
  }

  Widget buildButtons(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.0),
          child: QrscanButton(
            bgColor: ColorUtil.hexColor(0x35fb99),
            bgHighlightedColor: Colors.green.shade400,
            onPressed: () {
              changedTorchMode();
            },
            width: 100.0,
            height: 50.0,
            borderRadius: 25.0,
            child: Text(
              (torchOn
                  ? S.of(context).qrScanTorchOff
                  : S.of(context).qrScanTorchOn),
              textAlign: TextAlign.center,
              softWrap: true,
              style: TextStyle(
                fontSize: 14,
                color: ColorUtil.hexColor(0xffffff),
                fontWeight: FontWeight.w600,
                fontStyle: FontStyle.normal,
                decoration: TextDecoration.none,
              ),
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.0),
          child: QrscanButton(
            bgColor: ColorUtil.hexColor(0x35fb99),
            bgHighlightedColor: Colors.green.shade400,
            onPressed: () {
              refreshScan();
            },
            width: 100.0,
            height: 50.0,
            borderRadius: 25.0,
            child: Text(
              S.of(context).qrScanRefresh,
              textAlign: TextAlign.center,
              softWrap: true,
              style: TextStyle(
                fontSize: 14,
                color: ColorUtil.hexColor(0xffffff),
                fontWeight: FontWeight.w600,
                fontStyle: FontStyle.normal,
                decoration: TextDecoration.none,
              ),
            ),
          ),
        ),
      ],
    );
  }

  void navigatorBack() {
    NavigatorPageRouter.pop();
  }

  void openQrScanWebPage(String data) {
    Map<String, dynamic> args = {};
    args["url"] = data;

    /// true保留跳转的当前栈   false 不保留
    NavigatorPageRouter.pushReplacementNamed(
      RouterName.web,
      arguments: args,
    );
  }
}

三、小结

flutter开发实战-flutter二维码扫一扫功能实现，要使用到摄像头的原生的功能，使用的是插件：scan，实现自定义Appbar。

学习记录，每天不停进步。文章来源地址https://www.toymoban.com/news/detail-561730.html

到了这里，关于flutter开发实战-flutter二维码条形码扫一扫功能实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • opencv检测二维码和条形码

    opencv检测二维码和条形码

    使用excel可以实现制作二维码，但只能实现做英文和数字类型的，步骤如下： 在任意单元格输入内容 选项卡里找到开发工具—插入—点击ActiveX控件的最右下角。 弹出的窗口内，往下滑动选择Microsoft BarCode Control 16.0后，点击确定。 在任意区域，摁住鼠标左键不放，拖动鼠标，

    2024年02月10日
    浏览(55)
  • java生成、识别条形码和二维码

    java生成、识别条形码和二维码

    使用 zxing 开源库 Zxing主要是Google出品的，用于识别一维码和二维码的第三方库 主要类: BitMatrix 位图矩阵 MultiFormatWriter 位图编写器 MatrixToImageWriter 写入图片 可以生成、识别条形码和二维码 内置三种尺寸： enum Size {SMALL, MIDDLE, BIG} 依赖 将宽度不等的多个黑条和白条，按照一定

    2024年02月08日
    浏览(52)
  • Python Opencv实践 - 二维码和条形码识别

    Python Opencv实践 - 二维码和条形码识别

            使用pyzbar模块来识别二维码和条形码。ZBar是一个开源软件，用来从图像中读取条形码，支持多种编码,比如EAN-13/UPC-A、UPC-E、EAN-8、代码128、代码39、交错2/5以及二维码。         pyzbar是python封装ZBar的模块，我们用它来做条形码和二维码的识别。         安装方法：

    2024年02月04日
    浏览(46)

  • uniapp写微信小程序实现二维码条形码扫描识别

    1.最重要的就是一个函数uni.scanCode() 下边是我的代码可以直接使用 上述代码就直接实现了扫描功能很简单记得定义下扫描结果！有啥问题随时@我

    2024年04月09日
    浏览(57)
  • Python - OpenCV识别条形码、二维码（已封装，拿来即用）

    Python - OpenCV识别条形码、二维码（已封装，拿来即用）

    此代码可识别条形码和二维码，已封装好，拿来即用： 结果：

    2024年02月12日
    浏览(45)
  • 【C#】最全单据打印源码（打印模板、条形码&二维码、字体样式）

    【C#】最全单据打印源码（打印模板、条形码&二维码、字体样式）

    【C#】编号生成器（定义单号规则、固定字符、流水号、业务单号） 本文链接：https://blog.csdn.net/youcheng_ge/article/details/129129787 【C#】日期范围生成器（开始日期、结束日期） 本文链接：https://blog.csdn.net/youcheng_ge/article/details/129040663 【C#】组件化开发，调用dll组件方法 本文链接

    2024年02月03日
    浏览(72)
  • openmv和STM32串口通信识别条形码、二维码(HAL库)

    openmv和STM32串口通信识别条形码、二维码(HAL库)

    因为自己的毕设用到了条形码识别，所以在这里写一篇关于使用openmv识别条形码和二维码并且与STM32实现串口通讯，希望能帮到以后用到这一模块的同学，STM32方面我使用的是STM32F103RCT6,并且使用HAL进行编写代码。 OpenMV端：由图知UART_RX—P5 ------ UART_TX—P4 2.STM32端：这里我使用

    2023年04月13日
    浏览(49)
  • C#中轻松实现二维码和条形码识别：OpenCvSharp和ZXing详细教程

    C#中轻松实现二维码和条形码识别：OpenCvSharp和ZXing详细教程

      概述： 本教程使用OpenCvSharp和ZXing库，详细介绍了在C#中识别二维码和条形码的步骤。通过导入必要的命名空间、加载图像，并使用ZXing库进行二维码和条形码的识别，提供了清晰的示例代码。这方便了开发人员在项目中集成二维码和条形码识别功能。 要使用OpenCvSharp来分别

    2024年03月09日
    浏览(79)
  • vue - H5 移动端网页中调用手机摄像头扫描二维码 / 条形码功能，在h5手机网页里调起相机摄像头进行二维码或条形码扫描效果详细教程（详细示例组件源码，一键复制开箱即用！）

    vue - H5 移动端网页中调用手机摄像头扫描二维码 / 条形码功能，在h5手机网页里调起相机摄像头进行二维码或条形码扫描效果详细教程（详细示例组件源码，一键复制开箱即用！）

    实现了在vue2、vue3网页项目中，实现调起手机摄像头进行扫描二维码或者条码，可自定义样式。 直接复制组件代码，然后根据你的需求改一下。

    2024年02月16日
    浏览(60)
  • flutter：二维码生成与读取

    flutter：二维码生成与读取

    这csdn真的是服了，图片里有个二维码就直接变成违规图片了。至于效果的话，自己运行一下看看吧。 flutter中生成二维码可以使用 qr_flutter 。 官方文档 https://pub-web.flutter-io.cn/packages/qr_flutter 安装 示例1 示例2 官方提供的方式，无法在图片周围生成间隙。但其实我们可以使用堆

    2024年02月14日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包