Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Digit only TextFormField in Flutter

Tags:

flutter

dart

Im am working on an app that requires a price input in ¥ and as such has no decimal places. If we use keyboardType: TextInputType.numberWithOptions() we can get a number pad input. If we use validator: (input) { } we can check if input is valid but we cannot prevent it.

The problem is we can save a draft that will not need validation. So it is better for us to only allow digit input in the first place.

import 'package:flutter/material.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Digits Only',       theme: ThemeData(         primarySwatch: Colors.blue,       ),       home: MyHomePage(title: 'Flutter Demo Home Page'),     );   } }  class MyHomePage extends StatefulWidget {   MyHomePage({Key key, this.title}) : super(key: key);    final String title;    @override   _MyHomePageState createState() => new _MyHomePageState(); }  class _MyHomePageState extends State<MyHomePage> {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text(widget.title),       ),       body: Center(         child: Column(           mainAxisAlignment: MainAxisAlignment.center,           children: [             TextFormField(               autovalidate: true,               keyboardType: TextInputType.number,               validator: (input) {                 final isDigitsOnly = int.tryParse(input);                 return isDigitsOnly == null                     ? 'Input needs to be digits only'                     : null;               },             ),           ],         ),       ),     );   } } 

Is there a way to prevent certain text input and only allow digits?

like image 656
Eoin Avatar asked Aug 10 '18 02:08

Eoin


People also ask

How do I allow only numbers in TextField Flutter?

The TextField widget is required to set keyboardType: TextInputType. number, and inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter. digitsOnly] to accept numbers only as input.

How do I enter numbers in Flutter?

Flutter does not provide a predefined input for numbers. However, we can use the capabilities of a TextField (or TextFormField ) to mimic the behavior we want a number input to have. It's as simple as changing the keyboard to one that only provides numbers and the allowed characters to digits only.

How do you only show the number on the keyboard in Flutter?

Steps to show numeric input keyboard in FlutterStep 1: Add TextField widget to your dart file. Step 2: Add keyboardType parameter and assign the TextInputType. number. Step 3: Add inputFormatters parameter and assign the [FilteringTextInputFormatter.


2 Answers

Yep, you can use the inputFormatters attribute and add the WhitelistingTextInputFormatter.digitsOnly expression

  import 'package:flutter/services.dart';     TextFormField(           ...           inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],         ) 

You can find more info here: https://docs.flutter.io/flutter/services/TextInputFormatter-class.html

After flutter 1.12, WhitelistingTextInputFormatter was deprecated and you are running a newer version, use :

FilteringTextInputFormatter.digitsOnly

https://api.flutter.dev/flutter/services/FilteringTextInputFormatter-class.html

like image 119
diegoveloper Avatar answered Sep 19 '22 03:09

diegoveloper


With WhitelistingTextInputFormatter deprecated and using a double number:

keyboardType: TextInputType.numberWithOptions(decimal: true), inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9.,]+')),], onChanged: (value) => doubleVar = double.parse(value), 

RegExp('[0-9.,]+') allows for digits between 0 and 9, also comma and dot.

You can use RegExp('([0-9]+(\.[0-9]+)?)') to allow digits and only one dot. See explanation here.

double.parse() converts from string to double.

Don't forget you need: import 'package:flutter/services.dart';

like image 29
Paulo Belo Avatar answered Sep 23 '22 03:09

Paulo Belo