Flutter数字键盘插件flutter_keyboard_nums的使用

Flutter数字键盘插件flutter_keyboard_nums的使用

Windows 和 Linux 上的数字键盘、特殊符号键盘。

使用方法

在使用 flutter_keyboard_nums 插件时，可以通过 CustomKeyBoard 来实现数字键盘。

示例代码

const like = 'sample';
TextEditingController controller = TextEditingController();
CustomKeyBoard(
  controller: controller, // 必须的 TextEditingController
  maxLength: 12,
  backgroundColor: Colors.grey, 
  buttonColor: Colors.white,
  iconColor: Colors.black,
  backgroundOpacity: 0.3,
  textSize: 25,
  onSubmit: (){          // 必须的
    Navigator.pop(context);
  },
);

在 CustomKeyBoard 中，你可以修改长度、背景颜色、按钮颜色、图标颜色、背景透明度和文本大小。

在 SepcialSymbolNumPad 中，你可以修改按钮大小、按钮颜色、图标颜色、最大长度。你还可以通过 bool isNotPhoneNumber 参数来指定输入的是电话号码还是纯数字。

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用 flutter_keyboard_nums 插件。

import 'package:flutter/material.dart';
import 'package:flutter_keyboard_nums/flutter_k_keyboard.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'k_keyboard Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _textController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("k_keyboard"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: MediaQuery.of(context).size.height * 0.1,
              child: const Center(
                child: Text(
                  '你可以输入',
                  style: TextStyle(
                    fontSize: 24,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: MediaQuery.of(context).size.height * 0.1,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: TextField(
                  controller: _textController,
                  style: Theme.of(context).textTheme.headlineMedium,
                  decoration: const InputDecoration(
                    hintText: '输入文本',
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.grey, width: 0.0),
                    ),
                  ),
                  onTap: () {
                    onOpenKeyBoard(
                      controller: _textController,
                      numericType: false,
                      // isNotPhoneNumber: true,
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void onOpenKeyBoard({
    required TextEditingController controller,
    required bool numericType,
    bool isNotPhoneNumber = false,
  }) {
    var box = SizedBox(
      height: numericType
          ? MediaQuery.of(context).size.height * 0.4
          : MediaQuery.of(context).size.height * 0.25,
      child: numericType
          ? Center(
              child: KNumPad(
                controller: controller,
                maxLength: 11,
                buttonSize: 65,
                isNotPhoneNumber: isNotPhoneNumber,
                onSubmit: () {
                  Navigator.pop(context);
                },
              ),
            )
          : CustomKeyBoard(
              controller: controller,
              maxLength: 12,
              textSize: 15,
              onSubmit: () {
                Navigator.pop(context);
              },
            ),
    );
    showModalBottomSheet(
      elevation: 0,
      context: context,
      isScrollControlled: true,
      barrierColor: Colors.transparent,
      builder: (context) {
        return box;
      },
    );
  }
}