Enable Disable Elevated Button in Flutter iOS Android Example

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.

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

3. Creating our Root Parent class named as MyApp extends StatelessWidget.

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.

5. Creating ButtonState extends State<Button> class. This is our main Child class in which we would make all the View and widgets.

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.

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.

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.

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.

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.

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

Screenshots :-

Enable Disable Elevated Button in Flutter iOS Android Example

Leave a Reply

Your email address will not be published. Required fields are marked *