我无法找到在Flutter中创建一个只打开数字键盘并且仅接受数字输入的输入字段的方法。使用Flutter材料小部件是否可能实现这一点?一些GitHub讨论似乎表明这是一个支持的功能,但是我无法找到任何相关文档。
我需要一个带有最小/最大值控制的整数表单字段。问题是当焦点改变时,OnEditingComplete没有被调用。以下是我的解决方案:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:vs_dart/vs_dart.dart';
class IntegerFormField extends StatefulWidget {
final int value, min, max;
final InputDecoration decoration;
final ValueChanged<TextEditingController> onEditingComplete;
IntegerFormField({@required this.value, InputDecoration decoration, onEditingComplete, int min, int max})
: min = min ?? 0,
max = max ?? maxIntValue,
onEditingComplete = onEditingComplete ?? ((_) {}),
decoration = decoration ?? InputDecoration()
;
@override
_State createState() => _State();
}
class _State extends State<IntegerFormField> {
final TextEditingController controller = TextEditingController();
@override
void initState() {
super.initState();
controller.text = widget.value.toString();
}
@override
void dispose() {
super.dispose();
}
void onEditingComplete() {
{
try {
if (int.parse(controller.text) < widget.min)
controller.text = widget.min.toString();
else if (int.parse(controller.text) > widget.max)
controller.text = widget.max.toString();
else
FocusScope.of(context).unfocus();
} catch (e) {
controller.text = widget.value.toString();
}
widget.onEditingComplete(controller);
}
}
@override
Widget build(BuildContext context) {
return Focus(
child: TextFormField(
controller: controller,
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
keyboardType: TextInputType.number,
decoration: widget.decoration,
),
onFocusChange: (value) {
if (value)
controller.selection = TextSelection(baseOffset: 0, extentOffset: controller.value.text.length);
else
onEditingComplete();
},
);
}
}
您可以安装 intl_phone_number_input 包
。dependencies:
intl_phone_number_input: ^0.5.2+2
试试这段代码:
import 'package:flutter/material.dart';
import 'package:intl_phone_number_input/intl_phone_number_input.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.blue);
return MaterialApp(
title: 'Demo',
themeMode: ThemeMode.dark,
darkTheme: darkTheme,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(title: Text('Demo')),
body: MyHomePage(),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
final TextEditingController controller = TextEditingController();
String initialCountry = 'NG';
PhoneNumber number = PhoneNumber(isoCode: 'NG');
@override
Widget build(BuildContext context) {
return Form(
key: formKey,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InternationalPhoneNumberInput(
onInputChanged: (PhoneNumber number) {
print(number.phoneNumber);
},
onInputValidated: (bool value) {
print(value);
},
selectorConfig: SelectorConfig(
selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
backgroundColor: Colors.black,
),
ignoreBlank: false,
autoValidateMode: AutovalidateMode.disabled,
selectorTextStyle: TextStyle(color: Colors.black),
initialValue: number,
textFieldController: controller,
inputBorder: OutlineInputBorder(),
),
RaisedButton(
onPressed: () {
formKey.currentState.validate();
},
child: Text('Validate'),
),
RaisedButton(
onPressed: () {
getPhoneNumber('+15417543010');
},
child: Text('Update'),
),
],
),
),
);
}
void getPhoneNumber(String phoneNumber) async {
PhoneNumber number =
await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber, 'US');
setState(() {
this.number = number;
});
}
@override
void dispose() {
controller?.dispose();
super.dispose();
}
}
//Mobile
const TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone), hintText: 'Mobile'),
),
final _mobileFocus = new FocusNode();
final _mobile = TextEditingController();
TextFormField(
controller: _mobile,
focusNode: _mobileFocus,
maxLength: 10,
keyboardType: TextInputType.phone,
decoration: new InputDecoration(
counterText: "",
counterStyle: TextStyle(fontSize: 0),
hintText: "Mobile",
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.black,
fontSize: 15.0.
),
),
style: new TextStyle(
color: Colors.black,
fontSize: 15.0,
),
);
TextField(
controller: _controller,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp(r'[0.0-9.9]')),
])
以下是有关如何在Dart/Flutter中添加数字键盘、进行验证、添加样式以及其他相关内容的详细信息。希望这些内容能够帮助您更好地学习。
Padding(
padding: const EdgeInsets.all(3.0),
child: TextFormField(
maxLength: 10,
keyboardType: TextInputType.number,
validator: (value) {
if (value.isEmpty) {
return 'Enter Number Please';
}
return null;
},
decoration: InputDecoration(
prefixIcon: Icon(Icons.smartphone),
prefixText: '+92',
labelText: 'Enter Phone Number',
contentPadding: EdgeInsets.zero,
enabledBorder: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2, color: Theme
.of(context)
.primaryColor,
)
),
focusColor: Theme
.of(context)
.primaryColor,
),
),
),