Flutter数字键盘插件flutter_numeric_keyboard的使用

Flutter数字键盘插件flutter_numeric_keyboard的使用

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_numeric_keyboard: ^1.0.0

然后导入该包：

import 'package:flutter_numeric_keyboard/flutter_numeric_keyboard.dart';

如何使用

FlutterNumericKeyboard 是一个高度可定制的数字键盘组件。你可以通过传递不同的参数来调整它的外观和行为。

参数

以下是 FlutterNumericKeyboard 的一些常用参数及其说明：

FlutterNumericKeyboard(
  width: 300, // 数字键盘的宽度
  height: 400, // 数字键盘的高度
  showResult: true, // 是否显示结果
  resultTextStyle: const TextStyle( // 结果文本样式
    color: Colors.black,
    fontSize: 20,
    fontWeight: FontWeight.bold,
  ),
  resultFunction: (value) { // 结果函数，用于处理输入值
    print(value);
  },
  obscureResult: false, // 是否遮挡结果
  showDivider: true, // 是否显示分隔线
  rightIconBack: const Icon( // 删除图标
    Icons.backspace,
    color: Colors.blueGrey,
  ),
  showRightIcon: true, // 是否显示删除图标
  leftIconReset: const Icon( // 重置图标
    Icons.refresh,
    color: Colors.blueGrey,
  ),
  showLeftIcon: true, // 是否显示重置图标
  digitStyle: const TextStyle( // 数字样式
    color: Colors.black,
    fontSize: 15,
    fontWeight: FontWeight.bold,
  ),
  backgroundColor: Colors.white, // 背景颜色
  backgroundRadius: 20, // 背景圆角
)

示例代码

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

import 'package:flutter/material.dart';
import 'package:flutter_numeric_keyboard/flutter_numeric_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: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter numeric keyboard'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green.shade200,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            FlutterNumericKeyboard(
              width: 300,
              height: 400,
              showResult: true,
              resultTextStyle: const TextStyle(
                color: Colors.black,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
              resultFunction: (value) {
                print(value); // 打印输入的值
              },
              obscureResult: false,
              showDivider: true,
              rightIconBack: const Icon(
                Icons.backspace,
                color: Colors.blueGrey,
              ),
              showRightIcon: true,
              leftIconReset: const Icon(
                Icons.refresh,
                color: Colors.blueGrey,
              ),
              showLeftIcon: true,
              digitStyle: const TextStyle(
                color: Colors.black,
                fontSize: 15,
                fontWeight: FontWeight.bold,
              ),
              backgroundColor: Colors.white,
              backgroundRadius: 20,
            ),
          ],
        ),
      ),
    );
  }
}