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

问题描述 投票:30回答:7

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

dart flutter
7个回答
83
投票

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

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

enter image description here


20
投票

对于那些正在寻找制作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)
    )
)

13
投票

设置键盘和验证器

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
    ...

5
投票

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

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

并阻止符号: - (连字符,减号或短划线)

以及:⌴(空格)

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

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

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


2
投票

您可以使用keyboardType参数轻松更改输入类型,并且您有很多可能性检查文档TextInputType,以便您可以使用数字或电话值

 new TextField(keyboardType: TextInputType.number)

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;
}

0
投票

你可以试试这个:

TextFormField(
     keyboardType: TextInputType.number,
     decoration: InputDecoration(
              prefixIcon: Text("Enter your number: ")
     ),
     initialValue: "5",
     onSaved: (input) => _value = num.tryParse(input),
),
© www.soinside.com 2019 - 2024. All rights reserved.