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.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating our main void main runApp() method and here we would call our main MyApp class.
|
1 2 3 |
void main() { runApp(MyApp()); } |
3. Creating our main Class MyApp. In this call we would call our App() class.
|
1 2 3 4 5 6 7 8 9 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Enable Disable TextField in Flutter', home: App(), ); } } |
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.
|
1 2 3 4 |
class App extends StatefulWidget { @override _AppState createState() => _AppState(); } |
5. Creating our main Child class named as _AppState extends State.
|
1 2 3 4 5 |
class _AppState extends State<App> { } |
6. Creating a TextEditingController() named as controller. Using this controller we can get value of entered text in TextField widget.
|
1 |
final controller = TextEditingController(); |
7. Creating a Boolean type of variable named as isDisabled with default value of False. So by default the Textfield widget will be Enabled.
|
1 |
bool isDisabled = false; |
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.
|
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 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Enable Disable TextField'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( padding: const EdgeInsets.fromLTRB(30, 0, 30, 0), child: TextField( enabled: !isDisabled, controller: controller, decoration: const InputDecoration( labelText: 'Enter Text Here ', border: OutlineInputBorder(), ), )), Container( padding: const EdgeInsets.fromLTRB(30, 0, 30, 0), child: SwitchListTile( value: isDisabled, onChanged: (value) { setState(() { isDisabled = value; }); }, title: const Text('Disable The TextField'), )) ], ), )); } |
9. 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 |
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Enable Disable TextField in Flutter', home: App(), ); } } class App extends StatefulWidget { @override _AppState createState() => _AppState(); } class _AppState extends State<App> { final controller = TextEditingController(); bool isDisabled = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Enable Disable TextField'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( padding: const EdgeInsets.fromLTRB(30, 0, 30, 0), child: TextField( enabled: !isDisabled, controller: controller, decoration: const InputDecoration( labelText: 'Enter Text Here ', border: OutlineInputBorder(), ), )), Container( padding: const EdgeInsets.fromLTRB(30, 0, 30, 0), child: SwitchListTile( value: isDisabled, onChanged: (value) { setState(() { isDisabled = value; }); }, title: const Text('Disable The TextField'), )) ], ), )); } } |
Screenshots:-
