How to disable ElevatedButton? – Flutter

In this post, we will see how to disable ElevatedButton in flutter. I will show you two codes – One is for simply disabling the button and the other is to disable the button after a user has surpassed a certain number of taps.

To disable ElevatedButton in flutter you simply have to pass null to the onClick property of the ElevatedButton.

Now, let’s see the code for it.

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("ElevatedButton Example")),
        body: ElevatedButtonExample(),
      ),
    );
  }
}

class ElevatedButtonExample extends StatefulWidget {
  @override
  State<ElevatedButtonExample> createState() => _ElevatedButtonExampleState();
}

class _ElevatedButtonExampleState extends State<ElevatedButtonExample> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton.icon(
          onPressed: null, icon: Icon(Icons.call), label: Text("Call")),
    );
  }
}

Output :

Here, you can see that I have simply passed null to the onClick property. Here, I have used ElevatedButton.Icon to add an icon to the ElevatedButton. If you want you can simply use ElevatedButton only.

Now, we will pass null to the onClick property after the user has surpassed a certain number of clicks.

Let’s see the code.

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("ElevatedButton Example")),
        body: ElevatedButtonExample(),
      ),
    );
  }
}

class ElevatedButtonExample extends StatefulWidget {
  @override
  State<ElevatedButtonExample> createState() => _ElevatedButtonExampleState();
}

class _ElevatedButtonExampleState extends State<ElevatedButtonExample> {
  int maxClick = 5;
  int counter = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton.icon(
          onPressed: counter > maxClick
              ? null
              : () {
                  setState(() {
                    counter++;
                  });
                },
          icon: Icon(Icons.call),
          label: Text("Call")),
    );
  }
}

Output:

ElevatedButton before 6th tap.

ElevatedButton after 6th tap.

Here, I have set a counter and I am increasing the counter whenever the button gets clicked. When the clicks exceed the maxClick the button gets disabled. Here, I’ve set maxClick to 5, so on the 6th click, the button is disabled.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: