在 Flutter 中创建自定义 NumPad(数字键盘)

作者:坚果

公众号:​​大前端之旅​

华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,​​开源项目GVA成员之一​​,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

- 个人网站:​​http://jianguojs.cn/​

- Github:​​https://github.com/ITmxs​

- Gitee:​​https://gitee.com/itmxs/​

- 掘金:​​https://juejin.cn/user/3843548384077192​

- 知乎:​​大前端之旅​

- InfoQ:​​https://www.infoq.cn/u/jianguo/publish​

- 51CTO博客​​https://blog.51cto.com/jianguo​

- CSDN:​​https://blog.csdn.net/qq_39132095​

介绍

在某些情况下,iOS 或 Android 上的默认软键盘无法满足您的需求,这个时候尝试调整或深度自定义默认软键盘是一个非常好的主意。 本文将向您展示如何在 Flutter 中实现自定义数字键盘。我们将在不使用任何第三方插件的情况下从头开始制作。可能代码有点长,大家不要介意。

应用预览

我们要做的小键盘有9个圆形按钮,用于输入0到9的数字。此外还有2个图标按钮:第一个按钮用于删除最后一个数字,另一个用于提交接收到的数字。按下提交按钮时,将显示一个带有结果的对话框。 以下是它的工作原理:

在 Flutter 中创建自定义 NumPad(数字键盘)	   #yyds干货盘点#_flutter

环境

在 Flutter 中创建自定义 NumPad(数字键盘)	   #yyds干货盘点#_flutter_02

代码

1.运行以下命令初始化一个新的 Flutter 项目:

flutter create custom_numpad_example

打开当前项目

cd custom_numpad_example

用vscode打开项目

code .

lib目录中,添加一个名为num_pad.dart的新文件。该文件将保存我们可重用和可定制的NumPad小部件。lib文件夹内的文件结构现在如下所示:

.
├── main.dart
└── num_pad.dart

2.将以下内容添加到num_pad.dart文件中:

import 'package:flutter/material.dart';

// KeyPad widget
// This widget is reusable and its buttons are customizable (color, size)
class NumPad extends StatelessWidget {
final double buttonSize;
final Color buttonColor;
final Color iconColor;
final TextEditingController controller;
final Function delete;
final Function onSubmit;

const NumPad({
Key? key,
this.buttonSize = 70,
this.buttonColor = Colors.indigo,
this.iconColor = Colors.amber,
required this.delete,
required this.onSubmit,
required this.controller,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(left: 30, right: 30),
child: Column(
children: [
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// implement the number keys (from 0 to 9) with the NumberButton widget
// the NumberButton widget is defined in the bottom of this file
children: [
NumberButton(
number: 1,
size: buttonSize,
color: buttonColor,
controller: controller,
),
NumberButton(
number: 2,
size: buttonSize,
color: buttonColor,
controller: controller,
),
NumberButton(
number: 3,
size: buttonSize,
color: buttonColor,
controller: controller,
),
],
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
NumberButton(
number: 4,
size: buttonSize,
color: buttonColor,
controller: controller,
),
NumberButton(
number: 5,
size: buttonSize,
color: buttonColor,
controller: controller,
),
NumberButton(
number: 6,
size: buttonSize,
color: buttonColor,
controller: controller,
),
],
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
NumberButton(
number: 7,
size: buttonSize,
color: buttonColor,
controller: controller,
),
NumberButton(
number: 8,
size: buttonSize,
color: buttonColor,
controller: controller,
),
NumberButton(
number: 9,
size: buttonSize,
color: buttonColor,
controller: controller,
),
],
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// this button is used to delete the last number
IconButton(
onPressed: () => delete(),
icon: Icon(
Icons.backspace,
color: iconColor,
),
iconSize: buttonSize,
),
NumberButton(
number: 0,
size: buttonSize,
color: buttonColor,
controller: controller,
),
// this button is used to submit the entered value
IconButton(
onPressed: () => onSubmit(),
icon: Icon(
Icons.done_rounded,
color: iconColor,
),
iconSize: buttonSize,
),
],
),
],
),
);
}
}

// define NumberButton widget
// its shape is round
class NumberButton extends StatelessWidget {
final int number;
final double size;
final Color color;
final TextEditingController controller;

const NumberButton({
Key? key,
required this.number,
required this.size,
required this.color,
required this.controller,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return SizedBox(
width: size,
height: size,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: color,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(size / 2),
),
),
onPressed: () {
controller.text += number.toString();
},
child: Center(
child: Text(
number.toString(),
style: const TextStyle(
fontWeight: FontWeight.bold, color: Colors.white, fontSize: 30),
),
),
),
);
}
}

3.最后但同样重要的是,在main.dart中创建我们的NumPad类的实例并使其工作:

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

// import our custom number keyboard
import './num_pad.dart';

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

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: '大前端之旅',
theme: ThemeData(primarySwatch: Colors.amber),
home: const HomePage(),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
// text controller
final TextEditingController _myController = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('大前端之旅'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// display the entered numbers
Padding(
padding: const EdgeInsets.all(20),
child: SizedBox(
height: 70,
child: Center(
child: TextField(
controller: _myController,
textAlign: TextAlign.center,
showCursor: false,
style: const TextStyle(fontSize: 40),
// Disable the default soft keybaord
keyboardType: TextInputType.none,
)),
),
),
// implement the custom NumPad
NumPad(
buttonSize: 75,
buttonColor: Colors.purple,
iconColor: Colors.deepOrange,
controller: _myController,
delete: () {
_myController.text = _myController.text
.substring(0, _myController.text.length - 1);
},
// do something with the input numbers
onSubmit: () {
debugPrint('Your code: ${_myController.text}');
showDialog(
context: context,
builder: (_) => AlertDialog(
content: Text(
undefinedYou code is ${_myController.text}undefined,
style: const TextStyle(fontSize: 30),
),
));
},
),
],
),
);
}
}

结论

我们一起在 Flutter 中构建了一个自定义数字小键盘。您可以保存num_pad.dart文件并根据需要对其进行修改,以便在以后的项目中重复使用。

根据此灵感,你可以做出你的一个计算器应用吗?我想没问题的,加油! 最后大家觉得今天的内容如何呢?欢迎在留言区评论。