Flutter Show Hide Button on Text Field Input Character Enter Length

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.

2. Creating our main void main runApp() class. Here we would call our main MyApp class.

3. Creating our main MyApp extends StatelessWidget class. In this class we would call ChildApp() class.

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.

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.

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.

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.

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.

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.

10. Complete source code for main.dart file:

Screenshots:-

Flutter Show Hide Button on Text Field Input Character Enter Method

Flutter Show Hide Button on Text Field Input Character Enter Method

Leave a Reply

Your email address will not be published.