chenglei1986/license_plate_number

Flutter package for inputting chinese license plate number. | Flutter 车牌号输入组件，包含一个输入框和一个键盘。支持自定义主题，自带黑暗和明亮两个默认主题。支持横屏展示。

license_plate_number

Language: English | 中文简体

Flutter package for inputting chinese license plate number.

• Build-in one light style and one dark style, and the style can be changed.
• Supporting landscape.
• Plate numbers can be edited separately.

How to use

Install

dependencies:
  license_plate_number: ^2.0.1

Basic usage

Package includes two main widgets，PlateInputField and PlateKeyboard.

PlateInputField is for inputting the plate number.

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', '6']
      // value 沪A123456
    },
  );
  alignment: Alignment.center,
)

PlateKeyboard is usually not used directly. It is controlled by PlateInputField. But we also provide KeyboardController to show/hide the keyboard by yourself.

/// KeyboardController
KeyboardController _keyboardController = KeyboardController();

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

/// Hide keyboard
_keyboardController.hideKeyboard();

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

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

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

Styles

Two default styles was build in，but self-defined style is also supported.

/// 1. Use constructor.
PlateStyles(
  /// Text style of plate input field.
  plateInputFieldTextStyle: TextStyle(
    color: Color(0xFFFFFFFF),
    fontSize: 20,
    fontWeight: FontWeight.normal,
  ),
  /// Text style of new energy place holder.
  newEnergyPlaceHolderTextStyle: TextStyle(
    color: Color(0xFFDDDDDD),
    fontSize: 10,
    fontWeight: FontWeight.normal,
  ),
  /// Background color of input field.
  plateInputFieldColor: Color(0xFF4A4A4A),
  /// Border of input field.
  plateInputBorder: Border.fromBorderSide(BorderSide(
    color: Color(0xFFFFFFFF),
    width: 2,
    style: BorderStyle.solid,
  )),
  /// Border of focused input field.
  plateInputFocusedBorder: Border.fromBorderSide(BorderSide(
    color: Color(0xFF2196F3),
    width: 2,
    style: BorderStyle.solid,
  )),
  /// Border radius of input field.
  plateInputBorderRadius: const Radius.circular(8.0),
  /// Color of Separator between city code and numbers.
  plateSeparatorColor: Color(0xFFFFFFFF),
  
  /// Background color of keyboard.
  keyboardBackgroundColor: Color(0xFF131313),
  /// Text color of key text.
  keyboardButtonTextColor: Color(0xFFFFFFFF),
  /// Background color of keys.
  keyboardButtonColor: Color(0xFF4A4A4A),
  /// Background color of disabled keys.
  keyboardButtonDisabledColor: Color(0x994A4A4A),
);

/// 2. Copy with a default style.
PlateStyles.dark.copyWith(
  keyboardBackgroundColorDark: Color(0xFF000000),
);

license_plate_number's Issues

如何重新赋值？

我在当前页面，通过其他操作，获得了一个新的车牌，需要把值覆盖到重新当前组件上

请问如何实现页面加载进来之后自动打开键盘?

在弹出的软件盘上可否增加一个关闭按钮？

目前要关闭软件盘必须全部输入完成或者按返回键。
如果车牌并非新能源车，IOS将没有办法在不额外添加组件的情况下关闭软键盘。Android也一样不方便，可能发生返回键被按下多次的情况。

车牌号问题

发现两个小问题，希望作者可以改进一下；
字母O应该去掉，结尾现在只有'学,领,警,港,澳', 希望可以加上 ’挂‘

键盘弹出时 不能像textfield那样 让输入框顶上去

当输入框在界面最下方时 键盘弹出 不能像textfield那样 让输入框顶到上面 依然在最下边 被键盘盖住，体验不好 可以解决一下吗

谢谢老铁