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.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main Parent class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our Parent class named as MyApp. In this class we would call another Child class Temp.
|
1 2 3 4 5 6 7 8 9 10 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Set Maxlength on Textfield in flutter')), body: Center(child: 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.
|
1 2 3 |
class Temp extends StatefulWidget { _TempTextMax createState() => _TempTextMax(); } |
5. Creating our main Child class _TempTextMax extends State.
|
1 2 3 4 5 |
class _TempTextMax extends State<Temp> { } |
6. Now we would make a Controller for Text Field widget to hold the entered text.
|
1 |
final textController = TextEditingController(); |
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.
|
1 |
int length = 0; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
_onChanged(String value) { setState(() { length = value.length; }); if (length == 8) { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: new Text('Sorry, You have Reached the Maximum input limit...'), actions: <Widget>[ FlatButton( child: new Text("OK"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); } } |
9. Creating Widget Build area , Now we would make a TextField widget with maxLength: 8 to set maximum input char length to 8.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(8.0), child: TextField( controller: textController, autocorrect: true, decoration: InputDecoration(hintText: 'Type Some Text Here'), onChanged: _onChanged, maxLength: 8, )), ], ), )); } |
10. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Set Maxlength on Textfield in flutter')), body: Center(child: Temp()))); } } class Temp extends StatefulWidget { _TempTextMax createState() => _TempTextMax(); } class _TempTextMax extends State<Temp> { final textController = TextEditingController(); int length = 0; _onChanged(String value) { setState(() { length = value.length; }); if (length == 8) { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: new Text('Sorry, You have Reached the Maximum input limit...'), actions: <Widget>[ FlatButton( child: new Text("OK"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); } } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(8.0), child: TextField( controller: textController, autocorrect: true, decoration: InputDecoration(hintText: 'Type Some Text Here'), onChanged: _onChanged, maxLength: 8, )), ], ), )); } } |
Screenshot :-
