RaisedButton widget in flutter has automatically enabling and disabling button functionality without any prop. In flutter we do not pass any function or onClick method to Raised Button then it will automatically disable the button, There is no fix property present for this. So we are using Ternary operator on onPressed event and using the Ternary operator we would enable and disable the button. First we would make a Boolean type state and put the State in first part of Ternary operator then put the function which we want to call on State True and then put Null assignment. If State value is false then it will call the Null argument and button will be Disabled. So in this tutorial we would Flutter Enable Disable RaisedButton Widget Android iOS Example Tutorial.
Contents in this project Flutter Enable Disable RaisedButton Widget Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp widget class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with StatelessWidget. In this class we would call Button() class in Center area.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Enable Disable Button') ), body: Center( child: Button() ) ) ); } } |
4. Create a class named as Button extends StatefulWidget. In this class we would make createState() method of State with ButtonState() class. This would enable the State management in Given class tree.
|
1 2 3 4 5 |
class Button extends StatefulWidget { ButtonState createState() => ButtonState(); } |
5. Create a class named as ButtonState extends State. This is our main child class.
|
1 2 3 4 5 |
class ButtonState extends State<Button> { } |
6. Create a Boolean variable named as isEnabled with default True value. This would by-default enable the Raised Button.
|
1 |
bool isEnabled = true ; |
7. Create a function named as enableButton(). In this function we would set the isEnabled variable value as True. Using this function we would Enable the button.
|
1 2 3 4 5 6 |
enableButton(){ setState(() { isEnabled = true; }); } |
8. Create a function named as disableButton(). In this function we would Disable the Raised Button.
|
1 2 3 4 5 6 |
disableButton(){ setState(() { isEnabled = false; }); } |
9. Create a function named as sampleFunction(). We would call this function from Disabled button when it will be enabled.
|
1 2 3 4 |
sampleFunction(){ print('Clicked'); } |
10. Creating Widget Build area -> Scaffold widget -> Center widget -> Column widget -> Creating 3 Raised Button. The first Raised Button is our Disabled button and the other two buttons will be controlling whether to enable the above button or Disable the above button.
See the Image for more understanding, How Ternary operator works here:
|
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 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( onPressed: isEnabled ? ()=> sampleFunction() : null, color: Colors.pinkAccent, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Sample Button'), ), RaisedButton( onPressed: enableButton, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here Enable Above Button'), ), RaisedButton( onPressed: disableButton, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here Disable Above Button'), ), ], ), )); } |
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 80 81 82 83 84 85 86 |
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 Button') ), body: Center( child: Button() ) ) ); } } class Button extends StatefulWidget { ButtonState createState() => ButtonState(); } class ButtonState extends State<Button> { bool isEnabled = true ; enableButton(){ setState(() { isEnabled = true; }); } disableButton(){ setState(() { isEnabled = false; }); } sampleFunction(){ print('Clicked'); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( onPressed: isEnabled ? ()=> sampleFunction() : null, color: Colors.pinkAccent, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Sample Button'), ), RaisedButton( onPressed: enableButton, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here Enable Above Button'), ), RaisedButton( onPressed: disableButton, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here Disable Above Button'), ), ], ), )); } } |
Screenshots:
