Flutter车牌识别插件license_plate_number的使用

Flutter车牌识别插件license_plate_number的使用

1. 安装

首先，你需要在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  license_plate_number: ^2.0.1

2. 基本使用

Flutter 包含两个主要的组件：PlateInputField 和 PlateKeyboard。PlateInputField 用于输入 车牌号。

Container(
  child: PlateInputField(
    placeHolder: '沪A12345',
    style: PlateStyle.light,
    inputFieldWidth: 40,
    inputFieldHeight: 54,
    onChange: (List<String> array, String value) {
      // e.g.
      // array ['沪', 'A', '1', '2', '3', '4', '5']
      // value 沪A12345
    },
  ),
  alignment: Alignment.center,
)

PlateKeyboard 通常不会直接使用，它由 PlateInputField 控制。但是，我们也可以通过 KeyboardController 来手动控制键盘的显示和隐藏。

/// KeyboardController
KeyboardController _keyboardController = KeyboardController();

/// Show keyboard
_keyboardController.showKeyboard(context);

/// Hide keyboard
_keyboardController.hideKeyboard();

/// Is keyboard showing
_keyboardController.isKeyboardShowing();

/// Modify plate number
_keyboardController.plateNumber = 'XXXXXXX';

你可以将 KeyboardController 传递给 PlateInputField：

PlateInputField(
  /// Pass KeyboardController to PlateInputField
  keyboardController: _keyboardController,
);

3. 风格

默认提供了两种风格，同时也支持自定义风格。

/// 1. 使用构造函数。
PlateStyles(
  /// 文字样式
  plateInputFieldTextStyle: TextStyle(
    color: Color(0xFFFFFFFF),
    fontSize: 20,
    fontWeight: FontWeight.normal,
  ),
  /// 新能源车牌占位文字样式
  newEnergyPlaceHolderTextStyle: TextStyle(
    color: Color(0xFFDDDDDD),
    fontSize: 10,
    fontWeight: FontWeight.normal,
  ),
  /// 输入框背景颜色
  plateInputFieldColor: Color(0xFF4A4A4A),
  /// 输入框边框
  plateInputBorder: Border.fromBorderSide(BorderSide(
    color: Color(0xFFFFFFFF),
    width: 2,
    style: BorderStyle.solid,
  )),
  /// 焦点时的输入框边框
  plateInputFocusedBorder: Border.fromBorderSide(BorderSide(
    color: Color(0xFF2196F3),
    width: 2,
    style: BorderStyle.solid,
  )),
  /// 输入框圆角半径
  plateInputBorderRadius: const Radius.circular(8.0),
  /// 分隔符颜色
  plateSeparatorColor: Color(0xFFFFFFFF),

  /// 键盘背景颜色
  keyboardBackgroundColor: Color(0xFF1f),
  /// 键盘按钮文字颜色
  keyboardButtonTextColor: Color(0xFFFFFFFF),
  /// 键盘按钮背景颜色
  keyboardButtonColor: Color(0xFF4A4A4A),
  /// 键盘禁用按钮背景颜色
  keyboardButtonDisabledColor: Color(0x994A4A4A),
);

/// 2. 复制默认风格
PlateStyles.dark.copyWith(
  keyboardBackgroundColorDark: Color(0xFF000000),
);

示例代码

下面是一个完整的示例代码，展示了如何使用 license_plate_number 插件。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:license_plate_number/license_plate_number.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Brightness _brightness = Brightness.light;
  PlateStyles _plateStyles = PlateStyles.light;
  final KeyboardController _keyboardController = KeyboardController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'License plate number Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        brightness: _brightness,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('License plate number'),
          actions: [
            /// AppBar 弹出菜单
            PopupMenuButton(
              itemBuilder: (context) =&gt; [
                PopupMenuItem(child: Text('dark'), value: 'dark'),
                PopupMenuItem(child: Text('light'), value: 'light'),
              ],
              onSelected: (action) {
                switch (action) {

                  /// 切换成黑暗主题
                  case 'dark':
                    _plateStyles = PlateStyles.dark;
                    _brightness = Brightness.dark;
                    break;

                  /// 切换成明亮主题
                  case 'light':
                    _plateStyles = PlateStyles.light;
                    _brightness = Brightness.light;
                    break;
                }
                setState(() {});
              },
            ),
          ],
        ),
        body: GestureDetector(
          behavior: HitTestBehavior.translucent,
          child: MyHomePage(
            plateStyles: _plateStyles,
            keyboardController: _keyboardController,
          ),
          onTap: () {
            /// 点击键盘外区域收起键盘
            _keyboardController.hideKeyboard();
          },
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({
    this.plateStyles,
    this.keyboardController,
  });

  final PlateStyles plateStyles;
  final KeyboardController keyboardController;

  [@override](/user/override)
  Widget build(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    double screenWidth = mediaQuery.size.width;
    double screenHeight = mediaQuery.size.height;
    double inputFieldWidth = min(screenWidth, screenHeight) / 10;
    double inputFieldHeight = inputFieldWidth * 4 / 3;
    if (screenWidth &lt; screenHeight) {
      SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]);
    } else {
      SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    }
    return Container(
      alignment: Alignment.topCenter,
      padding: EdgeInsets.only(top: 30),

      /// 车牌号输入框
      child: PlateInputField(
        styles: plateStyles,
        inputFieldWidth: inputFieldWidth,
        inputFieldHeight: inputFieldHeight,
        keyboardController: keyboardController,
        plateSeparatorPadding: 8,
        plateSeparatorSize: 6,
        onChanged: (List&lt;String&gt; array, String value) {
          debugPrint(array.toString());
          debugPrint(value);
        },
      ),
    );
  }
}