Flutter二维码生成与扫描插件based_qr的使用

『 based_qr - 基于分割视图的二维码插件 』

最新更新: 2023-10-23 21:42:33

📚 简介

📸 截图

📦 如何使用

⏳ 进度

📌 注意事项

🧑‍💻 贡献者

🔦 声明

📚 简介 #

A Based QR code Widget, Which Helps You Create A Beautiful QR code

基于 mesh_gradient 和 flutter_pretty_qr 开发的二维码插件。

📸 截图 #

尝试 在线示例应用

📦 如何使用 #

• 按照 安装指南 将 based_qr 添加到你的 pubspec.yaml

• 更多信息，请参阅 示例代码

⏳ 进度 #

已完成，如有必要会进行修订

📌 注意事项 #

无

🧑‍💻 贡献者 #

🔦 声明 #

该项目在 MIT 许可下授权。详情请查看 LICENSE

完整示例代码

以下是一个完整的 Flutter 应用程序示例，演示如何使用 based_qr 插件生成二维码和扫描二维码。

import 'package:flutter/material.dart';
import 'package:based_qr/based_qr.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter QR Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter QR Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title});

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late String qrData;
  bool isScanning = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    qrData = "Hello, Flutter!";
  }

  // 生成二维码
  Widget generateQRCode() {
    return BasedQr(
      data: qrData,
      version: QrVersions.auto,
      size: 200.0,
      gapless: true,
    );
  }

  // 扫描二维码
  Widget scanQRCode() async {
    try {
      String result = await BasedQr.scan();
      setState(() {
        qrData = result;
        isScanning = false;
      });
    } catch (e) {
      print("Error scanning QR code: $e");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 显示生成的二维码
            generateQRCode(),
            SizedBox(height: 20),
            // 扫描按钮
            ElevatedButton(
              onPressed: () async {
                setState(() {
                  isScanning = true;
                });
                await scanQRCode();
              },
              child: Text(isScanning ? "正在扫描..." : "扫描二维码"),
            ),
            SizedBox(height: 20),
            // 显示扫描结果
            Text(
              qrData,
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入库:

   import 'package:flutter/material.dart';
   import 'package:based_qr/based_qr.dart';
   

2. 定义主应用程序类:

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter QR Example',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Flutter QR Example'),
       );
     }
   }
   

3. 定义主页状态类:

   class _MyHomePageState extends State<MyHomePage> {
     late String qrData;
     bool isScanning = false;
   
     [@override](/user/override)
     void initState() {
       super.initState();
       qrData = "Hello, Flutter!";
     }
   

4. 生成二维码方法:

   Widget generateQRCode() {
     return BasedQr(
       data: qrData,
       version: QrVersions.auto,
       size: 200.0,
       gapless: true,
     );
   }
   

5. 扫描二维码方法:

   Widget scanQRCode() async {
     try {
       String result = await BasedQr.scan();
       setState(() {
         qrData = result;
         isScanning = false;
       });
     } catch (e) {
       print("Error scanning QR code: $e");
     }
   }
   

6. 构建页面布局:

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             generateQRCode(),
             SizedBox(height: 20),
             ElevatedButton(
               onPressed: () async {
                 setState(() {
                   isScanning = true;
                 });
                 await scanQRCode();
               },
               child: Text(isScanning ? "正在扫描..." : "扫描二维码"),
             ),
             SizedBox(height: 20),
             Text(
               qrData,
               style: TextStyle(fontSize: 24),
             ),
           ],
         ),
       ),
     );
   }