效果如下：(帧数太低，不太流畅)
//主文件
import 'package:flutter/material.dart';import 'package:learn_flutter/components/ShowPayPwd.dart';class ShowPayModel extends StatelessWidget { const ShowPayModel({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("支付组件"), ), body: Container( height: 400, child: Center( child: OutlineButton( onPressed: (){ showModalBottomSheet( context: context, isScrollControlled: true, backgroundColor: Colors.transparent, builder: (BuildContext context){ return ShowPayPwd(context,onSuccess: (val){},); } ); }, child: Text("点击弹出键盘"), ), ), ) ); }}
//ShowPayPwd.dart
import 'package:flutter/material.dart';import 'package:learn_flutter/components/InputNumberWidget.dart';import 'package:learn_flutter/components/InputPwdWidget.dart';class ShowPayPwd extends StatefulWidget { final Function onSuccess; final String title; ShowPayPwd(context,{ Key key, this.title: '请输入密码', this.onSuccess }) : super(key: key); @override _ShowPayPwdState createState() => _ShowPayPwdState();}class _ShowPayPwdState extends State<ShowPayPwd> { String password; int length; @override void initState() { password = ""; length = 6; super.initState(); } @override Widget build(BuildContext context) { return Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( width: double.infinity, height: 40, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(20), topRight: Radius.circular(20) ) ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Opacity(opacity: 0,child: Icon(Icons.close),), Text(widget.title), IconButton(icon: Icon(Icons.close), onPressed: (){ Navigator.of(context).pop(); }) ], ) ), Container( color: Colors.white, child: Column( children: <Widget>[ InputPwdWidget(context, password: password, length: length), SizedBox(height: 40,), InputNumberWidget( context, onChange: (value){ setState(() { password = password + value; if(password.length == length){ widget.onSuccess(password); Navigator.of(context).pop(); } }); } ) ], ), ) ], ); }}//InputNumberWidget.dart
import 'package:flutter/material.dart';class InputNumberWidget extends StatelessWidget { final Function onChange; const InputNumberWidget(context,{ Key key, @required this.onChange, }) : super(key: key); /* 按钮的点击 */ keyClick(keyName){ onChange(keyName); } @override Widget build(BuildContext context) { return Container( width: double.infinity, height: MediaQuery.of(context).size.height / 3, child: Column( children: <Widget>[ Expanded( child: Row( children: <Widget>[ NumberKeyButton(context,keyName: "1",onClick: keyClick,), NumberKeyButton(context,keyName: "2",onClick: keyClick,), NumberKeyButton(context,keyName: "3",onClick: keyClick,), ], ), ), Expanded( child: Row( children: <Widget>[ NumberKeyButton(context,keyName: "4",onClick: keyClick,), NumberKeyButton(context,keyName: "5",onClick: keyClick,), NumberKeyButton(context,keyName: "6",onClick: keyClick,), ], ), ), Expanded( child: Row( children: <Widget>[ NumberKeyButton(context,keyName: "7",onClick: keyClick,), NumberKeyButton(context,keyName: "8",onClick: keyClick,), NumberKeyButton(context,keyName: "9",onClick: keyClick,), ], ), ), Expanded( child: Row( children: <Widget>[ NumberKeyButton(context,keyName: "",onClick: keyClick,), NumberKeyButton(context,keyName: "0",onClick: keyClick,), NumberKeyButton(context,keyName: "删除",onClick: keyClick,), ], ), ), ], ) ); }}/* 按键 */class NumberKeyButton extends StatelessWidget { const NumberKeyButton(context,{Key key,this.keyName,this.onClick}) : super(key: key); final String keyName; final Function onClick; keyDownClick() { onClick(keyName); } @override Widget build(BuildContext context) { return Expanded( child: Material( child: InkWell( onTap: keyDownClick, child: Container( width: MediaQuery.of(context).size.width / 3, decoration: BoxDecoration( border: Border.all( color: Color(0x10333333) ), ), child: Center( child: Text( keyName, style: TextStyle( color: Color(0xff333333), fontSize: 20 ), ), ), ), ) ) ); }}//InputPwdWidget.dart
import 'package:flutter/material.dart';class InputPwdWidget extends StatelessWidget { final String password; final int length; const InputPwdWidget(context,{ Key key, this.password:"", this.length: 6 }) : super(key: key); List<Widget> getPwdRow() { List<Widget> listWidget = []; for (var i = 1; i <= length; i++) { listWidget.add( Expanded( child: Container( decoration: BoxDecoration( border: i != length?Border( right: BorderSide( color: Colors.grey[400] ) ):Border() ), child: i <= password.length?Center( child: Container( width: 20, height: 20, decoration: BoxDecoration( borderRadius: BorderRadius.circular(12.0), color: Colors.black ), ), ):Container() ) ) ); } return listWidget; } @override Widget build(BuildContext context) { return Container( height: 80, color: Colors.white, child: Center( child: Container( height: 50, margin: EdgeInsets.fromLTRB(36, 0, 36, 0), decoration: BoxDecoration( border: Border.all( color: Colors.grey[400] ), borderRadius: BorderRadius.circular(10) ), child: Row( children: getPwdRow(), ), ), ) ); }}