如何在 Flutter 中创建用于输入数字的字段

一切都很简单。
所有这些功能都由通用支持TextField

为了在切换到此字段时显示数字小键盘，您必须指定小键盘的类型：

keyboardType: TextInputType.number

但是，这不会对字段的内容施加任何限制，并且不会使您免于用户插入的 ( Ctrl+ C/ Ctrl+ V) 字符、以编程方式设置的字符等。

为此，您需要对输入数据设置过滤器。

inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.digitsOnly // С таким фильтром могут быть введены только числа
]

因此，该字段可以这样声明：

new TextField(
    decoration: new InputDecoration(labelText: "Введите Ваше число"),
    keyboardType: TextInputType.number,
    inputFormatters: <TextInputFormatter>[
        FilteringTextInputFormatter.digitsOnly // С таким фильтром могут быть введены только числа
    ],
),

工作示例

主要.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.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: "Введите Ваше число"),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.digitsOnly // С таким фильтром могут быть введены только числа
],
          ),
        ],
      )),
    );
  }
}