In this tutorial, we’ll learn how to properly implement Flutter elevated button disabled by using a practical Flutter code example.
Introduction: Flutter Elevated Button Disabled
As the name suggests, it specifies the process of disabling the Flutter elevated button which means that when the user clicks on it, it shouldn’t perform any function.
So let’s see how to disable Flutter elevated button with the help of an easy Flutter code example.
Default Flutter Elevated Button
ElevatedButton(
onPressed: () {},
child: Text(
'Default Flutter Elevated Button',
))
- We’ve implemented a simple Flutter elevated button widget.
- After that we’ve passed an empty function to the onPressed constructor of Flutter elevated button widget.
- We also have given it a child Flutter text widget.
Implementing Flutter Elevated Button Disabled
For that, we’ve to use the onPressed constructor of elevated button widget which takes a function and in that we can define actions which will get triggered when this button is clicked.
To make the Flutter elevated button disabled, we just have to pass null to this onPressed constructor instead of a function. See the below code:
ElevatedButton( onPressed: null, child: Text( 'Flutter Elevated Button Is Disabled', ))
The elevated button is now disabled and can be seen in the above image.
We can see that the background color and the color of text is set to grey(lightened).
The complete source code of Flutter elevated button disabled is given in the below section.
Flutter Elevated Button Disabled Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: ElevatedButton(
onPressed: null,
child: Text(
'Flutter Elevated Button Is Disabled',
)))));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to implement Flutter elevated button disabled. I’d love to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
