Flutter车辆专用键盘插件flutter_vehicle_keyboard的使用

flutter_vehicle_keyboard

Flutter Vehicle Keyboard

仿交管12123车牌键盘

• 支持自动切换省份简称和字母键盘
• 支持输入完成自动关闭键盘
• 支持设置车牌长度
• 过滤字母“I”

开始使用

添加依赖

你可以使用以下命令将 flutter_vehicle_keyboard 的最新稳定版依赖添加至你的项目：

dependencies:
  flutter_vehicle_keyboard: ^replace-with-latest-version

使用示例

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String vehicleNumber = "";
  bool showKeyboard = true;

  TextEditingController controller = new TextEditingController();
  FocusNode focusNode = FocusNode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('仿12123车牌输入键盘'),
      ),
      body: new Center(
          child: Column(
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(10),
            height: 50,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text('车牌号码：'),
                Expanded(
                  child: VehicleField(
                    focusNode: focusNode,
                    autoSwitchLetterKeyBoard: true,
                    controller: controller,
                    textAlign: TextAlign.end,
                  ),
                )
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                child: Text("隐藏/显示"),
                onPressed: () {
                  showKeyboard = !showKeyboard;
                  if (showKeyboard) {
                    focusNode.requestFocus();
                  } else {
                    focusNode.unfocus();
                  }
                },
              ),
              SizedBox(
                width: 10,
              ),
              RaisedButton(
                child: Text("获取车牌号"),
                onPressed: () {
                  vehicleNumber = controller.text;
                  setState(() {});
                },
              ),
            ],
          ),
          Text(vehicleNumber),
        ],
      )),
    );
  }
}

完整示例Demo

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

import 'package:flutter_vehicle_keyboard/flutter_vehicle_keyboard.dart';

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

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

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  /// 键盘的整体回调，根据不同的按钮事件来进行相应的逻辑实现
  // void _onKeyDown(KeyDownEvent data) {
  //   debugPrint("keyEvent:" + data.key);
  //
  //   if (data.isClose() || data.isCommit()) {
  //     setState(() {
  //       showKeyboard = false;
  //     });
  //   }
  // }

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String vehicleNumber = "";
  bool showKeyboard = true;
  bool isEdit = true;

  TextEditingController controller = new TextEditingController(text: "粤A12345");
  FocusNode focusNode = FocusNode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('仿12123车牌输入键盘'),
      ),
      body: new Center(
          child: Column(
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(10),
            height: 50,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text('车牌号码：'),
                Expanded(
                  child: VehicleField(
                    focusNode: focusNode,
                    autoSwitchLetterKeyBoard: true,
                    controller: controller,
                    enabled: isEdit,
                    textAlign: TextAlign.end,
                    onChanged: (value) => {print("vihicle number onChanged: $value")},
                  ),
                )
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MaterialButton(
                child: Text("隐藏/显示"),
                onPressed: () {
                  showKeyboard = !showKeyboard;
                  if (showKeyboard) {
                    focusNode.requestFocus();
                  } else {
                    focusNode.unfocus();
                  }
                },
              ),
              SizedBox(
                width: 10,
              ),
              MaterialButton(
                child: Text("获取车牌号"),
                onPressed: () {
                  vehicleNumber = controller.text;
                  setState(() {});
                },
              ),
              SizedBox(
                width: 10,
              ),
              Text("是否可编辑"),
              Switch(
                value: isEdit,
                onChanged: (value) {
                  isEdit = value;
                  setState(() {});
                },
              ),
              // MaterialButton(
              //   child: Text("是否可编辑"),
              //   onPressed: () {
              //     isEdit = !isEdit;
              //     setState(() {});
              //   },
              // ),
            ],
          ),
          Text(vehicleNumber),
        ],
      )),
    );
  }
}