Hello friends, As you all know recently I am trying to cover all the basic tutorials regarding to Elevated Button widget in flutter. So today we would learn about about a new feature in elevated button. Friends in flutter if we pass null to a onPressed event in elevated button then the button itself become disabled without giving any argument. But the main functionality is to control the disable and enable event on a particular situation in flutter dart. So in this tutorial we would learn about how to Enable Disable Elevated Button in Flutter iOS Android Example.
Contents in this project Enable Disable Elevated Button in Flutter iOS Android Example:-
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 MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our Root Parent class named as MyApp extends StatelessWidget.
|
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('Flutter Enable Disable ElevatedButton')), body: Center(child: Button()))); } } |
4. In this class we’re calling another class named as Button in Center widget. We are using State in our tutorial so to use state in flutter we have to use State full widget. in Button class we would call ButtonState class with createState() method to enable mutable state in given class tree.
|
1 2 3 |
class Button extends StatefulWidget { ButtonState createState() => ButtonState(); } |
5. Creating ButtonState extends State<Button> class. This is our main Child class in which we would make all the View and widgets.
|
1 2 3 4 5 |
class ButtonState extends State<Button> { } |
6. Creating a Boolean type variable named as isEnabled with default True value. We would use this variable as State and to enable and disable the Elevated Button.
|
1 |
bool isEnabled = true; |
7. Creating a function named as enableElevatedButton(). In this method we would call the setState() method and change the State value to True. This will make the Elevated button enable.
|
1 2 3 4 5 |
enableElevatedButton() { setState(() { isEnabled = true; }); } |
8. Creating another function named as disableElevatedButton(). In this function we would again use the setState() method to change the State value to False. It will make the Elevated button disabled.
|
1 2 3 4 5 |
disableElevatedButton() { setState(() { isEnabled = false; }); } |
9. Creating a function named as printMSG(). in this function we would simply print a message on Terminal windows if use clicks the Elevated button.
|
1 2 3 |
printMSG() { print('Clicked'); } |
10. Creating Widget Build area -> Column widget -> Creating 3 Elevated Button widgets. We are using onPressed: isEnabled ? printMSG : null ternary operator to hold one operator with 2 operands.
|
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 |
Widget build(BuildContext context) { return Column(mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: const EdgeInsets.all(10), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.lightBlue, padding: EdgeInsets.all(8), textStyle: TextStyle(fontSize: 20), ), child: Text('Sample Elevated Button'), onPressed: isEnabled ? printMSG : null, ), ), Container( margin: const EdgeInsets.all(10), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, padding: EdgeInsets.all(8), textStyle: TextStyle(fontSize: 20), ), child: Text('Enable Above Elevated Button'), onPressed: enableElevatedButton, ), ), Container( child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, padding: EdgeInsets.all(8), textStyle: TextStyle(fontSize: 20), ), child: Text('Disable Above Elevated Button'), onPressed: disableElevatedButton, ), ), ]); } |
11. 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 |
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('Flutter Enable Disable ElevatedButton')), body: Center(child: Button()))); } } class Button extends StatefulWidget { ButtonState createState() => ButtonState(); } class ButtonState extends State<Button> { bool isEnabled = true; enableElevatedButton() { setState(() { isEnabled = true; }); } disableElevatedButton() { setState(() { isEnabled = false; }); } printMSG() { print('Clicked'); } @override Widget build(BuildContext context) { return Column(mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: const EdgeInsets.all(10), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.lightBlue, padding: EdgeInsets.all(8), textStyle: TextStyle(fontSize: 20), ), child: Text('Sample Elevated Button'), onPressed: isEnabled ? printMSG : null, ), ), Container( margin: const EdgeInsets.all(10), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, padding: EdgeInsets.all(8), textStyle: TextStyle(fontSize: 20), ), child: Text('Enable Above Elevated Button'), onPressed: enableElevatedButton, ), ), Container( child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, padding: EdgeInsets.all(8), textStyle: TextStyle(fontSize: 20), ), child: Text('Disable Above Elevated Button'), onPressed: disableElevatedButton, ), ), ]); } } |
Screenshots :-
Thanks a lot for this tuto. It helps!