[Solved] How To Set Flutter Material Button Disabled

flutter material button disabled

In this tutorial, we’ll learn how to properly implement Flutter material button disabled by using a practical Flutter code example.

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',
                    ))

default flutter material button widget

  • 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.
Let’s now see what changes we’ll see after the button is disabled.

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',
                    ))

flutter material button 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

flutter material button disabled

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.

Leave a Comment

Your email address will not be published.