Enable Disable TextField Widget in Flutter on Button Click

Hello friends, In today’s tutorial we would learn about enabling and disabling TextField widget on button click in flutter. We have seen in many mobile applications there are some restrictions like when user does some task when the Text Input widget will be enabled. Now to control enabling and disabling the TextField widget we would use enabled property. Enabled supports both True and False Boolean values. Now when we set its value to False it will Enable the TextField widget. Same as when we set its value to be True it will Disable the TextField widget. We would control its value using Boolean State variable. So in this tutorial we would learn about Enable Disable TextField Widget in Flutter on Button Click.

Contents in this project Enable Disable TextField Widget in Flutter on Button Click :-

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

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

3. Creating our main Class MyApp. In this call we would call our App() class.

4. Creating a class named as App extends StatefulWidget. In this class we would make _AppState class with createState() method to enable mutable state management.

5. Creating our main Child class named as _AppState extends State.

6. Creating a TextEditingController() named as controller. Using this controller we can get value of entered text in TextField widget.

7. Creating a Boolean type of variable named as isDisabled with default value of False. So by default the Textfield widget will be Enabled.

8. Creating a Widget Build area and here we would make our main a Column widget -> TextField widget and Switch widget. When user turn on the switch we will Disable the TextField and when user Turn Off the widget we will Enable the TextField widget.

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

Screenshots:-

Leave a Reply

Your email address will not be published.