如何在Flutter中创建数字输入字段?


124

我找不到在Flutter中创建可打开数字键盘的输入字段的方法。Flutter材质小部件可以做到这一点吗?一些github讨论似乎表明这是受支持的功能,但是我找不到有关它的任何文档。


添加键盘类型keyboardType:TextInputType.number,
Ishan Fernando

Answers:


245

您可以使用以下命令将数字指定为TextField的keyboardType

keyboardType: TextInputType.number

检查我的main.dart文件

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new HomePage(),
      theme: new ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Container(
          padding: const EdgeInsets.all(40.0),
          child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new TextField(
            decoration: new InputDecoration(labelText: "Enter your number"),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
    WhitelistingTextInputFormatter.digitsOnly
], // Only numbers can be entered
          ),
        ],
      )),
    );
  }
}

在此处输入图片说明


3
太好了,谢谢!我真的希望Flutter构造函数文档的格式没有那么糟糕。完全错过了这个。
Janne Annala

8
但是我可以在该字段上粘贴文本(字符),您还有其他选择吗?@Rissmon Suresh
Thirumal Govindaraj

5
不要忘记=> import'package:flutter / services.dart';
威默

允许放置点,空格并粘贴表情符号
agilob

5
inputFormatters:此处也需要[WhitelistingTextInputFormatter.digitsOnly],因为此处的答案中仍可以接受逗号和点。
拉维·亚达夫

78

对于那些谁正在寻找制作TextFieldTextFormField只接受数字输入,试试这个代码块:

TextFormField(
    controller: _controller,
    keyboardType: TextInputType.number,
    inputFormatters: <TextInputFormatter>[
        WhitelistingTextInputFormatter.digitsOnly
    ],
    decoration: InputDecoration(
        labelText:"whatever you want", 
        hintText: "whatever you want",
        icon: Icon(Icons.phone_iphone)
    )
)

3
欢迎这样做,以避免用户粘贴非数字字符串(inputFormatters),谢谢。
马里亚诺·阿尔加尼亚拉(MarianoArgañaraz),

2
即使在Flutter_web中,此效果也很好。原因是在flutter_web中我们无法强制使用数字键盘,因此限制是自然的选择。感谢@BilalŞimşek
Abhilash伊尔

1
这是完美的解决方案!
Kavinda Jayakody

30

通过此选项,您可以严格限制另一个带数字的字符。

 inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
 keyboardType: TextInputType.number,

对于使用上述选项,您必须导入此

import 'package:flutter/services.dart';

使用这种选项的用户不能将char粘贴到文本字段中


这是实际的综合答案。没有格式化程序,仅设置键盘是不够的。
shababhsiddique

如果我只想要十进制和数字。如何添加“。” 进入格式化程序的白名单?
shababhsiddique

19

设置键盘和验证器

String numberValidator(String value) {
  if(value == null) {
    return null;
  }
  final n = num.tryParse(value);
  if(n == null) {
    return '"$value" is not a valid number';
  }
  return null;
}

new TextFormField(
    keyboardType: TextInputType.number, 
    validator: numberValidator, 
    textAlign: TextAlign.right
    ...

错误:声明局部变量num之前无法引用
kashlo

好的,num变量名不起作用。名称需要改变
君特Zöchbauer

1
从docs:onError参数已过时,将被删除。而不是num.parse(string,(string){...}),应该使用num.tryParse(string)?(...)。
kashlo

13

对于那些需要在文本字段中使用Money格式的人:

仅使用:,(逗号)和。(期)

并阻止符号:-(连字符,减号或破折号)

以及:⌴ (空格)

在您的TextField中,只需设置以下代码:

keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [BlacklistingTextInputFormatter(new RegExp('[\\-|\\ ]'))],

simbol连字符和空格仍将出现在键盘中,但会被阻塞。


您知道如何只允许一个逗号或句号吗?
Heddie Franco




2

您可以尝试以下方法:

TextFormField(
     keyboardType: TextInputType.number,
     decoration: InputDecoration(
              prefixIcon: Text("Enter your number: ")
     ),
     initialValue: "5",
     onSaved: (input) => _value = num.tryParse(input),
),

1

keyboardType: TextInputType.number 将会打开一个数字键盘,当用户输入/粘贴其他内容时,我会清除文本字段。

keyboardType: TextInputType.number,
onChanged: (String newVal) {
    if(!isNumber(newVal)) {
        editingController.clear();
    }
}

// Function to validate the number
bool isNumber(String value) {
    if(value == null) {
        return true;
    }
    final n = num.tryParse(value);
    return n!= null;
}

1

这是Android上实际电话键盘的代码:

关键部分: keyboardType: TextInputType.phone,

  TextFormField(
    style: TextStyle(
      fontSize: 24
    ),
    controller: _phoneNumberController,
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      prefixText: "+1 ",
      labelText: 'Phone number'),
    validator: (String value) {
      if (value.isEmpty) {
        return 'Phone number (+x xxx-xxx-xxxx)';
      }
      return null;
    },
  ),

0

这是数字键盘的代码: keyboardType:TextInputType.phone 在文本字段中添加此代码时,它将打开数字键盘。

  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,
           ),
          );

欢迎使用Stack Overflow!请至少提供一些有关其如何与代码一起使用的上下文。
子轩

0

对于数字输入或数字键盘,可以使用keyboardType:TextInputType.number

TextFormField(
  decoration: InputDecoration(labelText:'Amount'),
    controller: TextEditingController(
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Enter Amount';
    }
  },
  keyboardType: TextInputType.number
)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.