How To Easily Change Flutter Elevated Button Color

flutter elevated button color

In this Flutter post, we will be practically customizing the Flutter elevated button color by using a proper Flutter example code. We will first see what the default Flutter elevated button color looks like, then we will practically change its color.

So let’s not wait anymore and just dive right into its implementation.

What is Flutter Elevated Button Color?

It defines the background color of the Flutter elevated button widget. Let’s now practically see what the default color of that button is and how we can change it.

Default Flutter Elevated Button Color

In order to see the default background color of elevated button, we have to use the elevated button widget class. See below code:

ElevatedButton(
             onPressed: () {},
             child: Text('Elevated Button Default Color'))
flutter elevated button default background color
You can see that this is the default Flutter elevated button color. We have used the required onPressed constructor and also we have passed a Flutter text widget to the child constructor of Flutter elevated button class.

Change Flutter Elevated Button Color

Let’s now see how to give that button a custom color. See below code:

style: ElevatedButton.styleFrom(primary: Colors.green)
flutter elevated button color
As you can see, we have to use the style constructor of the elevated button class and pass it ElevatedButton.styleFrom. Then by using its primary constructor, we can easily change the background color of Flutter elevated button as seen in the above image.
So this is how you can easily change the Flutter elevated button color in your own Flutter apps as well. Hope you like this post.
Don’t hesitate to ask, if you have an questions related to the implementation of Flutter elevated button background color. I’d be more than happy to answer all.
Below is the complete source code of the above implemented custom Flutter elevated button color.

Customized Flutter Elevated Button Color Complete Source Code

flutter elevated button color

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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 10),
                    child: ElevatedButton(
                        onPressed: () {},
                        style: ElevatedButton.styleFrom(primary: Colors.green),
                        child: Text('Custom Elevated Button Color'))))));
  }
}

Conclusion

To conclude, hope your thoughts are now cleared on how to customize Flutter elevated button color. I’d love to have your feedback on this post. I would be looking forward to see you visit my other posts as well. Thank you for reading.

Leave a Comment

Your email address will not be published. Required fields are marked *