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

这篇具有很好参考价值的文章主要介绍了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;

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

class _QrScanAppBarState extends State<QrScanAppBar> {
  
  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;

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

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

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

  
  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);

  
  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模板网!

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

领支付宝红包 赞助服务器费用

相关文章

  • 【MAUI】条形码,二维码扫描功能

    本系列文章面向移动开发小白,从零开始进行平台相关功能开发,演示如何参考平台的官方文档使用MAUI技术来开发相应功能。 移动端的扫描条形码、二维码的功能已经随处可见,已经很难找到一个不支持扫描的App了,但是微软的MAUI竟然没有提供,那么我们应该如何实现呢?

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

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

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

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

    2024年02月04日
    浏览(40)
  • 【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日
    浏览(61)
  • Python - OpenCV识别条形码、二维码(已封装,拿来即用)

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

    2024年02月12日
    浏览(42)
  • uniapp写微信小程序实现二维码条形码扫描识别

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

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

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

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

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

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

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

    2024年02月16日
    浏览(56)
  • flutter扫描二维码,全套学习

    1.你所知道的设计模式有哪些? 参考回答 创建型模式,共五种 :工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式,共七种 :适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。 行为型模式,共十一种 :策略模

    2024年03月28日
    浏览(36)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包