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.
DeveloperXon 
Leave a Reply