How To Set Flutter Elevated Button Disabled [Flutter Easy Guide]

flutter elevated button disabled

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

default flutter elevated button widget

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

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

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

flutter elevated 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: 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.

Leave a Comment

Your email address will not be published.