Example of Set Maxlength on Textfield in Flutter | Limit Input

Hello friends, In today’s tutorial we would learn about a new functionality in flutter’s TextField widget. As we have seen in many mobile applications there are maximum number of input character are fixed and user does not allow to enter more than fix characters. It’s a type of validation used in programming languages so user cannot enter too much data. In flutter we can set max length limit using maxLength property of TextField widget. So in today’s tutorial what we are going to do is, We would set the TextField input limit to 8 and when users enters more than 8 char then it will show us a Alert dialog box telling us that You have Reached the Maximum input limit. So in this tutorial we would learn about Example of Set Maxlength on Textfield in Flutter.

Contents in this project Example of Set Maxlength on Textfield in Flutter :-

1. Open your project’s main.dart file and import material.dart’ package.

2. Creating void main runApp() method and here we would call our main Parent class.

3. Creating our Parent class named as MyApp. In this class we would call another Child class Temp.

4. Creating our Temp class. In this class we would make the createState() method along with our new Child class _TempTextMax. The _TempTextMax is our main Child class and we would write all the code of widgets here.

5. Creating our main Child class _TempTextMax extends State.

6. Now we would make a Controller for Text Field widget to hold the entered text.

7. Creating a Integer type of variable named as length with default value 0. We would use this variable to store the length of entered text.

8. Creating a function named as _onChanged. In this function first we would count the Text Field entered text length and when the length reaches to 8 we will print a Alert message on screen.

9. Creating Widget Build area , Now we would make a TextField widget with maxLength: 8 to set maximum input char length to 8.

10. Complete source code for main.dart file :-

Screenshot :-

Example of Set Maxlength on Textfield in Flutter | Limit Input

Leave a Reply

Your email address will not be published.