[英]How can i make textfield with hyphen at certain places of input number in flutter
I am making the UI in which i have to show the input text field like this:我正在制作 UI,我必须在其中显示这样的输入文本字段:
I try to make it like this but unable to make as i am new to flutter. Is there any kind of widget that will fulfill this requirement in flutter or you can guide me how can i make this one widget.我尝试这样做,但无法做到,因为我是 flutter 的新手。在 flutter 中是否有任何类型的小部件可以满足此要求,或者您可以指导我如何制作这个小部件。
You can try this.你可以试试这个。 if you want to use multiple text field in a row.如果你想在一行中使用多个文本字段。
Container(
width: 200,
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.blue)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 50,
child: TextField(
keyboardType: TextInputType.number,
focusNode: f1,
onChanged: (String newVal) {
if (newVal.length == 5) {
f1.unfocus();
FocusScope.of(context).requestFocus(f2);
}
},
)),
Text(" - "),
Container(
width: 70,
child: TextField(
keyboardType: TextInputType.number,
focusNode: f2,
onChanged: (String newVal) {
if (newVal.length == 7) {
f2.unfocus();
FocusScope.of(context).requestFocus(f3);
}
if(newVal == ''){
f2.unfocus();
FocusScope.of(context).requestFocus(f1);
}
},
)),
Text(" - "),
Container(
width: 10,
child: TextField(
keyboardType: TextInputType.number,
focusNode: f3,
onChanged: (String newVal) {
if (newVal.length == 1) {
f3.unfocus();
}
if(newVal == ''){
f3.unfocus();
FocusScope.of(context).requestFocus(f2);
}
},
)),
],
),
),
Output: Output:
But if you want to do that in single TextField then you should do something like this:但是如果你想在单个 TextField 中这样做,那么你应该这样做:
Container(
width: 200,
child: Center(
child: TextFormField(
keyboardType: TextInputType.number,
inputFormatters: [
WhitelistingTextInputFormatter.digitsOnly,
new LengthLimitingTextInputFormatter(13),
new NumberFormatter()
],
),
),
),
//Custom InputFormatter
class NumberFormatter extends TextInputFormatter {
@override
TextEditingValue formatEditUpdate(
TextEditingValue oldValue, TextEditingValue newValue) {
var text = newValue.text;
if (newValue.selection.baseOffset == 0) {
return newValue;
}
var buffer = new StringBuffer();
for (int i = 0; i < text.length; i++) {
buffer.write(text[i]);
var nonZeroIndex = i + 1;
print(text.length);
if (nonZeroIndex <= 5) {
print("non");
print(nonZeroIndex);
if (nonZeroIndex % 5 == 0 && nonZeroIndex != text.length) {
buffer.write('-'); // Add double spaces.
}
} else {
if (nonZeroIndex % 12 == 0 && nonZeroIndex != text.length) {
buffer.write('-'); // Add double spaces.
}
}
}
var string = buffer.toString();
return newValue.copyWith(
text: string,
selection: new TextSelection.collapsed(offset: string.length));
}
}
Output: Output:
Using this package flutter_masked_text , you can do this as below.使用此 package flutter_masked_text ,您可以按如下方式执行此操作。 This will auto-format the text with the hyphens at required positions as the user types in the number.当用户输入数字时,这将在所需位置自动格式化带有连字符的文本。
class _MyWidgetState extends State<MyWidget> {
MaskedTextController tc = MaskedTextController(mask: '00000-0000000-0');
@override
Widget build(BuildContext context) {
return TextField(
controller: tc,
decoration: InputDecoration(
hintText: 'e.g. 61101-1234524-1',
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.