Welcome Friends, First of all sorry for being inactive for couple of days. I was busy in some important work and now I’m free from it, I’m here with a new tutorial which our user Aditya Pal required. In today’s tutorial we would learn about a new type of functionality we have seen in many android and iOS applications. This functionality is majorly known as form validation in flutter. So what we will be doing in this tutorial is that Inside the Text Field widget when user starts typing his phone number then when the phone number reaches to 10 digit then it’ll show the submit button on screen. This functionality works on real time so when user delete any of the typed number it will again automatically hide the submit raised button. So in this tutorial we would learn about Flutter Show Hide Button on Text Field Input Character Enter Method Android iOS Example.
Contents in this project Flutter Show Hide Button on Text Field Input Character Enter Method Android iOS example:-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating our main void main runApp() class. Here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class. In this class we would call ChildApp() class.
|
1 2 3 4 5 6 7 8 9 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Show Button When User Enters 10 Digit Number')), body: Center(child: ChildApp()))); } } |
4. Creating another class named as ChildApp extends StatefulWidget. Inside this class we would make the createState() to enable mutable state management in given class tree in ChildAppState class.
|
1 2 3 |
class ChildApp extends StatefulWidget { ChildAppState createState() => ChildAppState(); } |
5. Creating the ChildAppState extends State<ChildApp> class. This is our main Child class in which we would write all the main source code for Text Field widget and Raised Button.
|
1 2 3 4 |
class ChildAppState extends State<ChildApp> { } |
6. Creating a final type of TextEditingController() named as textController to hold and extract value from Text Field widget. One more thing friends, The textController should be unique for each Text Field widget as per it holds that Text Field inside typed data.
|
1 |
final textController = TextEditingController(); |
7. Creating two variables one named as charLength and other named as status. The charLength variable is a integer type variable and the status is a Boolean type variable. We would use these variables as State in our tutorial.
charLength : – Is used to hold the length of typed character inside Text Field widget.
status :- Is used to show and hide the Raised Button on a particular event.
|
1 2 3 |
int charLength = 0; bool status = false; |
8. Creating a function named as _onChanged() with String value. We would call this function on Text Field onChanged event. In this function we would first starts counting typed CHAR length then when length reached to 10 we will show the Raised Button and if user deleted some of numbers and if the type char length is less then 10 then it will hide the Raised Button widget again.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
_onChanged(String value) { setState(() { charLength = value.length; }); if (charLength == 10) { setState(() { status = true; }); } else { setState(() { status = false; }); } } |
9. Creating Widget Build Area -> Scaffold widget -> Center widget -> Column widget -> Text Field widget and Visibility widget. We are using Visibility widget to show and hide the child Raised Button widget. The Visibility widget has a event named as visible which supports Boolean type of value. If the given value is True then it will show the Child Widget and if the given value is False then it will hide the Child widget.
|
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 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: EdgeInsets.all(8.0), child: Text("Length = $charLength", style: TextStyle(fontSize: 20))), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: textController, autocorrect: true, keyboardType: TextInputType.number, decoration: InputDecoration(hintText: 'Enter Number Here'), onChanged: _onChanged, )), Visibility( maintainSize: true, maintainAnimation: true, maintainState: true, visible: status, child: Container( margin: EdgeInsets.only(top: 20), child: Center( child: RaisedButton( child: Text('Submit Your Data'), onPressed: () => {print('Button Clicked')}, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ))), ], ), )); } |
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 73 74 75 76 77 78 79 80 81 82 83 |
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('Show Button When User Enters 10 Digit Number')), body: Center(child: ChildApp()))); } } class ChildApp extends StatefulWidget { ChildAppState createState() => ChildAppState(); } class ChildAppState extends State<ChildApp> { final textController = TextEditingController(); int charLength = 0; bool status = false; _onChanged(String value) { setState(() { charLength = value.length; }); if (charLength == 10) { setState(() { status = true; }); } else { setState(() { status = false; }); } } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: EdgeInsets.all(8.0), child: Text("Length = $charLength", style: TextStyle(fontSize: 20))), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: textController, autocorrect: true, keyboardType: TextInputType.number, decoration: InputDecoration(hintText: 'Enter Number Here'), onChanged: _onChanged, )), Visibility( maintainSize: true, maintainAnimation: true, maintainState: true, visible: status, child: Container( margin: EdgeInsets.only(top: 20), child: Center( child: RaisedButton( child: Text('Submit Your Data'), onPressed: () => {print('Button Clicked')}, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ))), ], ), )); } } |
Screenshots:-
