In this tutorial, we’ll learn how to properly implement Flutter material button disabled by using a practical Flutter code example.
Outline
- Introduction: Flutter Material Button Disabled
- Default Flutter Material Button
- Implementing Flutter Material Button Disabled
- Flutter Material Button Disabled Source Code
- Conclusion
Introduction: Flutter Material Button Disabled
As the name suggests, it specifies the process of disabling the Flutter material button which means that when the user clicks on it, it shouldn’t perform any function.
So let’s see how to disable Flutter material button with the help of an easy Flutter code example.
Default Flutter Material Button
MaterialButton(
onPressed: (){},
color: Colors.blue,
child: Text(
'Default Flutter Material Button',
))
- We’ve implemented a simple Flutter material button widget.
- After that we’ve passed an empty function to the onPressed constructor of Flutter material button widget.
- We also have given it a blue background color.
Implementing Flutter Material Button Disabled
For that, we’ve to use the onPressed constructor of material 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 material button disabled, we just have to pass null to this onPressed constructor instead of a function. See the below code:
MaterialButton( onPressed: null, color: Colors.blue, child: Text( 'Flutter Material Button is Disabled', ))
The material button is now disabled and can be seen in the above image.
We can see that the background color is removed and also the color of text is set to grey(lightened).
The complete source code of Flutter material button disabled is given in the below section.
Flutter Material 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: MaterialButton(
onPressed: null,
color: Colors.blue,
child: Text(
'Flutter Material Button is Disabled',
)))));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to implement Flutter material 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.
You might also like:
How To Pause Video In Flutter App [Flutter Easy Guide]
How To Play Video In Flutter App [Flutter Easy Guide]
