How to create number input field in Flutter

Question

I m unable to find a way to create an input field in Flutter that would open up a numeric keyboard  Is this possible with Flutter material widgets  Some github discussions seem to indicate this is a supported feature but I m unable to find any documentation about it

User · Answer

Set the keyboard and a validator  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            https   docs flutter io flutter material TextFormField TextFormField html https   docs flutter io flutter services TextInputType-class html

User · Answer

You can use this two attributes together with TextFormField    TextFormField           keyboardType  TextInputType number          inputFormatters   WhitelistingTextInputFormatter digitsOnly     It s allow to put only numbers  no thing else      https   api flutter dev flutter services TextInputFormatter-class html

User · Answer

For those who need to work with money format in the text fields   To use only     comma  and    period   and block the symbol  -  hyphen  minus or dash   as well as the     blank space   In your TextField  just set the following code   keyboardType  TextInputType numberWithOptions decimal  true   inputFormatters   BlacklistingTextInputFormatter new RegExp     -             The simbols hyphen and space will still appear in the keyboard  but will become blocked

User · Answer

If you need to use a double number  keyboardType  TextInputType numberWithOptions decimal  true   inputFormatters   FilteringTextInputFormatter allow RegExp   0-9          onChanged   value    gt  doubleVar   double parse value    RegExp   0-9      allows for digits between 0 and 9  also comma and dot  double parse   converts from string to double  Don t forget you need  import  package flutter services dart

User · Answer

You can try this   TextFormField       keyboardType  TextInputType number       decoration  InputDecoration                prefixIcon  Text  Enter your number                  initialValue   5        onSaved   input    gt   value   num tryParse input

User · Answer

U can Install package intl phone number input dependencies    intl phone number input   0 5 2 2  and try this code  import  package flutter material dart   import  package intl phone number input intl phone number input dart    void main     gt  runApp MyApp      class MyApp extends StatelessWidget      override   Widget build BuildContext context        var darkTheme   ThemeData dark   copyWith primaryColor  Colors blue        return MaterialApp        title   Demo         themeMode  ThemeMode dark        darkTheme  darkTheme        theme  ThemeData          primarySwatch  Colors blue                 home  Scaffold          appBar  AppBar title  Text  Demo             body  MyHomePage                           class MyHomePage extends StatefulWidget      override    MyHomePageState createState     gt   MyHomePageState       class  MyHomePageState extends State lt MyHomePage gt      final GlobalKey lt FormState gt  formKey   GlobalKey lt FormState gt        final TextEditingController controller   TextEditingController      String initialCountry    NG     PhoneNumber number   PhoneNumber isoCode   NG        override   Widget build BuildContext context        return Form        key  formKey        child  Container          child  Column            mainAxisAlignment  MainAxisAlignment center            children   lt Widget gt               InternationalPhoneNumberInput                onInputChanged   PhoneNumber number                    print number phoneNumber                                  onInputValidated   bool value                    print value                                  selectorConfig  SelectorConfig                  selectorType  PhoneInputSelectorType BOTTOM SHEET                  backgroundColor  Colors black                                 ignoreBlank  false                autoValidateMode  AutovalidateMode disabled                selectorTextStyle  TextStyle color  Colors black                 initialValue  number                textFieldController  controller                inputBorder  OutlineInputBorder                               RaisedButton                onPressed                       formKey currentState validate                                   child  Text  Validate                               RaisedButton                onPressed                       getPhoneNumber   15417543010                                   child  Text  Update                                                                  void getPhoneNumber String phoneNumber  async       PhoneNumber number           await PhoneNumber getRegionInfoFromPhoneNumber phoneNumber   US         setState            this number   number                  override   void dispose         controller  dispose        super dispose           image

User · Answer

You can Easily  change the Input Type using the keyboardType Parameter  and you have a lot of possibilities check the documentation TextInputType so you can use the number or phone value   new TextField keyboardType  TextInputType number

User · Answer

Here is code for numeric keyboard    keyboardType  TextInputType phone   When you add this code in textfield it will open numeric keyboard     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

User · Answer

Through this option you can strictly restricted another char with out number   inputFormatters   FilteringTextInputFormatter digitsOnly    keyboardType  TextInputType number   For using above option you have to import this import  package flutter services dart    using this kind of option user can not paste char in a textfield

User · Answer

Here is code for actual Phone keyboard on Android   Key part  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

User · Answer

keyboardType  TextInputType number would open a num pad on focus  I would clear the text field when the user enters past anything else   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

User · Answer

You can use Form Builder Package to display any type of form field  For number input field  FormBuilderTextField       keyboardType  TextInputType number       validators              FormBuilderValidators numeric

User · Answer

For those who are looking for making TextField or TextFormField accept only numbers as input  try this code block   for flutter 1 20 or newer versions TextFormField                controller   controller                keyboardType  TextInputType number                inputFormatters   lt TextInputFormatter gt                   FilteringTextInputFormatter allow RegExp r  0-9                                     decoration  InputDecoration                    labelText   quot whatever you want quot                     hintText   quot whatever you want quot                     icon  Icon Icons phone iphone     for earlier versions of 1 20 TextFormField      controller   controller      keyboardType  TextInputType number      inputFormatters   lt TextInputFormatter gt           WhitelistingTextInputFormatter digitsOnly            decoration  InputDecoration          labelText  quot whatever you want quot            hintText   quot whatever you want quot           icon  Icon Icons phone iphone

User · Answer

You can specify the number as keyboardType for the TextField using  keyboardType  TextInputType number  Check my main dart file import  package flutter material dart   import  package flutter services dart    void main     gt  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 lt StatefulWidget gt  createState         return new HomePageState           class HomePageState extends State lt HomePage gt       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   lt Widget gt             new TextField              decoration  new InputDecoration labelText   quot Enter your number quot                keyboardType  TextInputType number              inputFormatters   lt TextInputFormatter gt       FilteringTextInputFormatter digitsOnly       Only numbers can be entered

User · Answer

The TextField widget is required to set keyboardType  TextInputType number  and inputFormatters   lt TextInputFormatter gt  FilteringTextInputFormatter digitsOnly  to accept numbers only as input       TextField              keyboardType  TextInputType number              inputFormatters   lt TextInputFormatter gt                 FilteringTextInputFormatter digitsOnly                   Only numbers can be entered               Example in DartPad  import  package flutter material dart   import  package flutter services dart        void main     gt  runApp new MyApp              class MyApp extends StatelessWidget          override       Widget build BuildContext context            return MaterialApp            home  HomePage              theme  ThemeData primarySwatch  Colors blue                                     class HomePage extends StatefulWidget          override       State lt StatefulWidget gt  createState             return HomePageState                           class HomePageState extends State lt HomePage gt           override       Widget build BuildContext context            return Scaffold            backgroundColor  Colors white            body  Container                padding  const EdgeInsets all 40 0                 child  Column                  mainAxisAlignment  MainAxisAlignment center                  children   lt Widget gt                     Text  quot This Input accepts Numbers only quot                      SizedBox height  20                     TextField                      decoration  InputDecoration                        focusedBorder  OutlineInputBorder                          borderSide                              BorderSide color  Colors greenAccent  width  5 0                                                  enabledBorder  OutlineInputBorder                          borderSide  BorderSide color  Colors red  width  5 0                                                  hintText   Mobile Number                                              keyboardType  TextInputType number                      inputFormatters   lt TextInputFormatter gt                         FilteringTextInputFormatter digitsOnly                           Only numbers can be entered                                        SizedBox height  20                     Text  quot You can test be Typing quot

User · Answer

For number input or numeric keyboard you can use keyboardType  TextInputType number  TextFormField    decoration  InputDecoration labelText  Amount        controller  TextEditingController         validator   value        if  value isEmpty          return  Enter Amount                keyboardType  TextInputType number

[dart] How to create number input field in Flutter?

Examples related to dart

Examples related to flutter