我无法找到一种方法来创建一个输入字段颤振,将打开一个数字键盘,应该采取数字输入。这是可能的颤振材料部件?一些GitHub讨论似乎表明这是一个受支持的功能,但我无法找到任何关于它的文档。


当前回答

对于那些正在寻找使TextField或TextFormField只接受数字作为输入的人,尝试以下代码块:

用于flutter 1.20或更新版本

TextFormField(
  controller: _controller,
  keyboardType: TextInputType.number,
  inputFormatters: <TextInputFormatter>[
   // for below version 2 use this
 FilteringTextInputFormatter.allow(RegExp(r'[0-9]')), 
// for version 2 and greater youcan also use this
 FilteringTextInputFormatter.digitsOnly

  ],
  decoration: InputDecoration(
    labelText: "whatever you want",
    hintText: "whatever you want",
    icon: Icon(Icons.phone_iphone)
  )
)

对于1.20的早期版本

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

其他回答

你可以指定数字为keyboardType的TextField使用:

keyboardType: TextInputType.number

检查一下我的总管。飞镖文件

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: "Enter your number"),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.digitsOnly
], // Only numbers can be entered
          ),
        ],
      )),
    );
  }
}

这里是关于如何添加数字键盘,如何进行验证,如何添加样式,以及dart/flutter中的其他内容的所有细节。 我希望它能帮助你更好地学习。

Padding(
            padding: const EdgeInsets.all(3.0),
            child: TextFormField(
              maxLength: 10,
              keyboardType: TextInputType.number,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Enter Number Please';
                }
                
                return null;
              },
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.smartphone),
                prefixText: '+92',
                labelText: 'Enter Phone Number',
                contentPadding: EdgeInsets.zero,
                enabledBorder: OutlineInputBorder(),
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      width: 2, color: Theme
                        .of(context)
                        .primaryColor,
                    )
                ),
                focusColor: Theme
                    .of(context)
                    .primaryColor,
              ),
            ),
          ),

你可以试试这个:

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

我需要en IntegerFormField与最小/最大的控制。最大的问题是当焦点改变时,oneditingcomplete没有被调用。以下是我的解决方案:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:vs_dart/vs_dart.dart';

class IntegerFormField extends StatefulWidget {
  final int value, min, max;
  final InputDecoration decoration;
  final ValueChanged<TextEditingController> onEditingComplete;
  IntegerFormField({@required this.value, InputDecoration decoration, onEditingComplete, int min, int max})
      : min = min ?? 0,
        max = max ?? maxIntValue,
        onEditingComplete = onEditingComplete ?? ((_) {}),
        decoration = decoration ?? InputDecoration()
  ;

  @override
  _State createState() => _State();
}

class _State extends State<IntegerFormField> {
  final TextEditingController controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    controller.text = widget.value.toString();
  }

  @override
  void dispose() {
    super.dispose();
  }

  void onEditingComplete() {
    {
      try {
        if (int.parse(controller.text) < widget.min)
          controller.text = widget.min.toString();
        else if (int.parse(controller.text) > widget.max)
          controller.text = widget.max.toString();
        else
          FocusScope.of(context).unfocus();
      } catch (e) {
        controller.text = widget.value.toString();
      }
      widget.onEditingComplete(controller);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Focus(
      child: TextFormField(
        controller: controller,
        inputFormatters: [FilteringTextInputFormatter.digitsOnly],
        keyboardType: TextInputType.number,
        decoration: widget.decoration,
      ),
      onFocusChange: (value) {
        if (value)
          controller.selection = TextSelection(baseOffset: 0, extentOffset: controller.value.text.length);
        else
          onEditingComplete();
      },
    );
  }
}

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

TextFormField(
  decoration: InputDecoration(labelText:'Amount'),
    controller: TextEditingController(
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Enter Amount';
    }
  },
  keyboardType: TextInputType.number
)