license_plate_number 1.0.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 56

license_plate_number #

pub package

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: ^1.0.4

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

1.0.0 #

  • Initial release.

1.0.2 #

  • Add documents.

1.0.3 #

  • Supporting plate number of new energy car.

1.0.4 #

  • Fix a bug.

example/lib/main.dart

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

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

  @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) => [
                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: Container(
            alignment: Alignment.topCenter,
            padding: EdgeInsets.only(top: 30),

            /// 车牌号输入框
            child: PlateInputField(
              styles: _plateStyles,
              keyboardController: _keyboardController,
              onChanged: (List<String> array, String value) {
                debugPrint(array.toString());
                debugPrint(value);
              },
            ),
          ),
          onTap: () {
            /// 点击键盘外区域收起键盘
            _keyboardController.hideKeyboard();
          },
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  license_plate_number: ^1.0.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:license_plate_number/license_plate_number.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
13
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
56
Learn more about scoring.

We analyzed this package on Jul 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [license_plate_number] that is in a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
dotted_border ^1.0.5 1.0.5
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
path_drawing 0.4.1
path_parsing 0.1.4
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test