How to Disable Button In Flutter?

Hello Guys How are you all? Hope You all are fine. Some Times we need to enable or disable buttons in our flutter project. So today Here I come with a tutorial on How to Dynamically Disable and Enable Button in Flutter ?

Without Wasting your Time Lets start this tutorial. Output Of our Tutorial will be exact as below GIF.

How to Disable Button In Flutter?

1. Import material.dart in your main.dart file

import 'package:flutter/material.dart';

2. Create void main runApp() method and here we would call our main App widget class.

void main() {
  runApp(App());
}

3. Create our main class named as App extends with StatelessWidget. In this class we would call FlutterExample() class.

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Enable and Disable Button in Flutter Tutorial - FlutterCorner',
      home: FlutterExample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

4. Create FlutterExample Class With StatefulWidget widget.

class FlutterExample extends StatefulWidget {
  FlutterExample({Key key}) : super(key: key);

  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {

}

5. Make Variable named status and give it default value as true.

  bool status = true;

6. Create Method named disableButton when this method will call then disableButton will update status variable to false.

  disableButton() {
    setState(() {
      status = false;
    });
  }

7. Create Method named enableButton when this method will call then enableButton will update status variable to true.

  enableButton() {
    setState(() {
      status = true;
    });
  }

8. Now Create 3 Button Using RaisedButton Widget. 1st button is button that we want update its state to enable or disable.

9. Make 2nd Button named Click Here To Enable Button On tap of this Button will enable 1st button. Add onPressed as the above method enableButton.

10. Make 3rd Button Named Click Here To Disable Button On tap of this Button will disable our 1st button. Add onPressed as the above method disableButton.

              RaisedButton(
                onPressed: status ? () => () {} : null,
                color: Colors.pinkAccent,
                textColor: Colors.white,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Text('Sample Button'),
              ),
              SizedBox(
                height: 30,
              ),
              RaisedButton(
                onPressed: status ? null : enableButton,
                color: Colors.lightGreen,
                textColor: Colors.white,
                child: Text('Click Here To Enable Button'),
              ),
              RaisedButton(
                onPressed: status == false ? null : disableButton,
                color: Colors.red,
                textColor: Colors.white,
                child: Text('Click Here To Disable Button'),
              ),

Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Enable and Disable Button in Flutter Tutorial - FlutterCorner',
      home: FlutterExample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class FlutterExample extends StatefulWidget {
  FlutterExample({Key key}) : super(key: key);

  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  bool status = true;

  disableButton() {
    setState(() {
      status = false;
    });
  }

  enableButton() {
    setState(() {
      status = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Enable / Disable Button - FlutterCorner'),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              RaisedButton(
                onPressed: status ? () => () {} : null,
                color: Colors.pinkAccent,
                textColor: Colors.white,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Text('Sample Button'),
              ),
              SizedBox(
                height: 30,
              ),
              RaisedButton(
                onPressed: status ? null : enableButton,
                color: Colors.lightGreen,
                textColor: Colors.white,
                child: Text('Click Here To Enable Button'),
              ),
              RaisedButton(
                onPressed: status == false ? null : disableButton,
                color: Colors.red,
                textColor: Colors.white,
                child: Text('Click Here To Disable Button'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Summery

So it’s all About All possible Methods. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

• How to implement dropdown list in flutter?
• How to change the application launcher icon on Flutter?
• Also read How to Downgrade Flutter SDK ??
• How to Solve Command Not Found in Flutter?
• Version code 1 has already been used. Try another version code flutter