Code Samples: textfield

  
  This post is just my quick note on how to limit the soft keyboard to allow only digits.
  
  

  

  
  TextField is one of the most commonly used widgets in Flutter. It helps users to enter their text input. In this tutorial, let’s learn how to make the textfield number only by changing the keyboard type in Flutter and apply regex to restrict other than valid numbers. 
  
  
  

  

  
  Kyebord type input only show a keyboard with number inputs, but you can add like 4....4 which is not a number anyway, so let apply regex too to avoid such type of situation.




You can specify the number as keyboard type for the TextField Widget using:
  
  


keyboardType: TextInputType.number
  
  


  
  Through this option, you can strictly restrict another char without a number.
  
  

  
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
keyboardType: TextInputType.number,




Lets apply regex to TextField to avoid unexpected input to TextField: 


  
  I'm going to full example, first, created a file named input_validation_utils.dart with following contents:


import 'package:flutter/services.dart';

abstract class StringValidator {
  bool isValid(String value);
}

class DecimalNumberEditValidator extends RegexValidator {
  DecimalNumberEditValidator() : super(regexSource: "^\$|^(0|([1-9][0-9]{0,7}))(\\.[0-9]{0,2})?\$");
}

class RegexValidator implements StringValidator {
  RegexValidator({required this.regexSource});
  final String regexSource;

  /// value: the input string
  /// returns: true if the input string is a full match for regexSource
  bool isValid(String value) {
    try {
      final regex = RegExp(regexSource);
      final matches = regex.allMatches(value);
      for (Match match in matches) {
        if (match.start == 0 && match.end == value.length) {
          return true;
        }
      }
      return false;
    }
    catch (e) {
      // Invalid regex
      assert(false, e.toString());
      return true;
    }
  }
}

class ValidatorInputFormatter implements TextInputFormatter {
  ValidatorInputFormatter({required this.editingValidator});
  final StringValidator editingValidator;

  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    final oldValueValid = editingValidator.isValid(oldValue.text);
    final newValueValid = editingValidator.isValid(newValue.text);
    if (oldValueValid && !newValueValid) {
      return oldValue;
    }
    return newValue;
  }
}



Then we need to apply above validator to a TextField to restrict input other than numbers, now main.dart is looks like:


import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:p1/input_validation_utils.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title = "Regex Input Validation";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ListView(
        children: <Widget>[
          SizedBox(height: 30,),
          TextField(
            decoration: InputDecoration.collapsed(hintText: '\$0.00'),
            style: TextStyle(fontSize: 32.0, color: Colors.black87),
            textAlign: TextAlign.center,
            keyboardType: TextInputType.number,
            autofocus: true,
            //disabled auto correct if regex failed
            autocorrect: false,
            textInputAction: TextInputAction.done,
            inputFormatters: [
              //applying our custom formatter to TextField
              //so that input other than number can be input
              ValidatorInputFormatter(
                editingValidator: DecimalNumberEditValidator(),
              )
            ],
            onChanged: (value) {
              print("Input=${value}");
            },
          ),
          SizedBox(height: 30,),
          OutlinedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MyHomePage()),
                );
              },
              child: Text("Forward")
          )
        ],
      ),
    );
  }
}



Sample screen shot as below:
  
  
    
    
    
Pages

Tuesday, September 28, 2021

Flutter – How to limit keyboard to allow digits only - How to Make TextField Number only in Flutter - Digits Only Input Keyboard in Flutter – Only Numbers on Text Field - How to Create Number Inputfield in Flutter
