Flutter银行账户识别插件flutter_iban_scanner的使用

Flutter银行账户识别插件flutter_iban_scanner的使用

简介

flutter_iban_scanner 是一个用于通过智能手机摄像头和 Google 的 ML Kit 识别国际银行账户号码（IBAN）的 Flutter 插件。该插件可以帮助用户快速准确地扫描 IBAN，简化银行账户信息的输入过程。

使用方法

1. 添加依赖 在 pubspec.yaml 文件中添加 flutter_iban_scanner 作为依赖项：

   dependencies:
     flutter_iban_scanner:
   

2. 导入插件 在 Dart 文件中导入 flutter_iban_scanner 插件：

   import 'package:flutter_iban_scanner/flutter_iban_scanner.dart';
   

3. 使用 IBANScannerView 组件 调用 IBANScannerView 组件，并提供 onScannerResult 回调函数来处理扫描结果：

   IBANScannerView(
     onScannerResult: (iban) {
       // 处理扫描到的 IBAN
       print('Scanned IBAN: $iban');
     },
   ),
   

4. 完整示例代码 下面是一个完整的示例应用，展示了如何使用 flutter_iban_scanner 插件来扫描 IBAN 并显示结果：

   import 'package:flutter/material.dart';
   import 'package:flutter_iban_scanner/flutter_iban_scanner.dart';
   import 'package:camera/camera.dart';
   
   Future<void> main() async {
     WidgetsFlutterBinding.ensureInitialized();
   
     runApp(
       MyApp(),
     );
   }
   
   GlobalKey scaffold = GlobalKey();
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return DismissKeyboard(
         child: MaterialApp(
           debugShowCheckedModeBanner: false,
           theme: _theme,
           home: Home(),
         ),
       );
     }
   }
   
   class Home extends StatefulWidget {
     @override
     _HomeState createState() => _HomeState();
   }
   
   class _HomeState extends State<Home> {
     late TextEditingController _ibanController;
     late List<CameraDescription> cameras;
   
     @override
     void initState() {
       super.initState();
       _initCameras();
       _ibanController = TextEditingController();
     }
   
     @override
     void dispose() {
       _ibanController.dispose();
       super.dispose();
     }
   
     void _initCameras() async {
       cameras = await availableCameras();
     }
   
     @override
     Widget build(BuildContext context) {
       FocusNode focusNode = FocusNode();
   
       return Scaffold(
         key: scaffold,
         appBar: AppBar(
           title: Text('IBAN Scanner Demo App'),
           centerTitle: true,
           elevation: 0,
         ),
         body: SafeArea(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Padding(
                 padding: EdgeInsets.symmetric(horizontal: 16),
                 child: TextField(
                   controller: _ibanController,
                   onChanged: (iban) => _ibanController.value.copyWith(
                     text: iban,
                     selection: TextSelection(
                       baseOffset: iban.length,
                       extentOffset: iban.length,
                     ),
                   ),
                   focusNode: focusNode,
                   decoration: InputDecoration(
                     labelText: "IBAN",
                     labelStyle: TextStyle(color: Theme.of(context).primaryColor),
                     enabledBorder: OutlineInputBorder(
                       borderSide: BorderSide(color: Theme.of(context).primaryColor),
                     ),
                     focusedBorder: OutlineInputBorder(
                       borderSide: BorderSide(color: Theme.of(context).primaryColor),
                     ),
                     hintText: 'CH ....',
                     suffixIcon: IconButton(
                       icon: Icon(
                         Icons.camera_alt,
                         color: Theme.of(context).primaryColor,
                       ),
                       onPressed: () {
                         focusNode.unfocus();
                         focusNode.canRequestFocus = false;
                         Navigator.push(
                           context,
                           MaterialPageRoute(
                             builder: (context) => IBANScannerView(
                               cameras: cameras,
                               onScannerResult: (iban) {
                                 Navigator.of(scaffold.currentContext!).pop();
                                 _showMyDialog(iban);
                               },
                             ),
                           ),
                         );
                         Future.delayed(
                           Duration(milliseconds: 100),
                           () {
                             focusNode.canRequestFocus = true;
                           },
                         );
                       },
                     ),
                   ),
                 ),
               ),
             ],
           ),
         ),
       );
     }
   
     Future<void> _showMyDialog(iban) async {
       return showDialog<void>(
         context: scaffold.currentContext!,
         barrierDismissible: false, // 用户必须点击按钮才能关闭对话框
         builder: (BuildContext context) {
           return AlertDialog(
             title: const Text('IBAN 找到！'),
             content: Text(iban),
             actions: <Widget>[
               TextButton(
                 child: const Text('重试'),
                 onPressed: () {
                   Navigator.of(context).pop();
                   Navigator.push(
                     context,
                     MaterialPageRoute(
                       builder: (context) => IBANScannerView(
                         cameras: cameras,
                         onScannerResult: (iban) {
                           Navigator.of(scaffold.currentContext!).pop();
                           _showMyDialog(iban);
                         },
                       ),
                     ),
                   );
                 },
               ),
               TextButton(
                 child: const Text('正确'),
                 onPressed: () {
                   Navigator.of(context).pop();
                   _ibanController.text = iban;
                 },
               ),
             ],
           );
         },
       );
     }
   }
   
   // DismissKeyboard 组件（可复用）
   class DismissKeyboard extends StatelessWidget {
     final Widget child;
     DismissKeyboard({required this.child});
   
     @override
     Widget build(BuildContext context) {
       return GestureDetector(
         onTap: () {
           FocusScopeNode currentFocus = FocusScope.of(context);
           if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
             FocusManager.instance.primaryFocus!.unfocus();
           }
         },
         child: child,
       );
     }
   }
   
   final _theme = ThemeData(
     primaryColor: Color(0xff009ACE),
     accentColor: Color(0xffFCC442),
   );