Flutter TextInput Number - Dart

在Flutter中，TextInput组件可以用于接受用户的输入。通过使用keyboardType属性，我们可以指定输入框的键盘类型。在本教程中，我们将探讨如何在Flutter中创建一个只允许输入数字的TextInput组件。

实现

首先，在我们开始实现之前，需要在pubspec.yaml文件中引入flutter_masked_text插件。

dependencies:
  flutter_masked_text: ^0.9.3

然后，在你的Dart文件中导入flutter_masked_text包并创建一个TextEditingController对象。

import 'package:flutter/material.dart';
import 'package:flutter_masked_text/flutter_masked_text.dart';

class NumberInput extends StatefulWidget {
  @override
  _NumberInputState createState() => _NumberInputState();
}

class _NumberInputState extends State<NumberInput> {
  final _controller = MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ',');
  
  @override
  Widget build(BuildContext context) {
    return TextField(
      keyboardType: TextInputType.numberWithOptions(decimal: true),
      controller: _controller,
    );
  }
}

在这个示例中，我们使用MoneyMaskedTextController控制器，该控制器允许我们在输入数字时添加千位分隔符和小数点。由于我们只允许输入数字，我们将keyboardType属性设置为TextInputType.numberWithOptions(decimal: true)。这意味着用户只能输入数字和小数点。

结论

在本教程中，我们使用了flutter_masked_text控制器和TextInputType.numberWithOptions(decimal: true)键盘类型，使得用户只能输入数字和小数点。这样就可以创建一个简单的只允许输入数字的TextInput组件。