How To Easily Change Flutter FlatButton Color

In this post, I will be changing the Flutter Flatbutton color with proper Flutter example implementation. Everything about the Flutter Flatbutton color will be discussed step by step and in detail so you can have a proper practical idea of how to change Flutter Flatbutton color.

What is Flutter Flatbutton Color?

Flutter Flatbutton color is the background color of the Flutter Flatbutton widget. In this post, we will see what the default Flutter Flatbutton color is and then how to change its color. So let’s not keep you waiting and start customizing the Flutter Flatbutton color using proper Flutter example.

Default Flutter Flatbutton Color

In order to see the default Flutter Flatbutton color, we just have to implement a simple Flutter Flatbutton widget. See the below code:

FlatButton(
      onPressed: () {}, 
      child: Text('Flat button'))

We have used the required onPressed constructor and also we have passed Flutter text widget to the child constructor of the Flatbutton class. As you can see in the above image, the background color of the Flutter Flatbutton widget is transparent. Let’s now see how to change its background color.

Change Flutter Flatbutton Color

So to change the background Flutter Flatbutton color, we have to use the color constructor of the Flutter Flatbutton widget class. This color constructor takes Color so we have passed a green color for demonstration. See the below code:

  color: Colors.green

As you can see in the above image that the background color of Flutter Flatbutton is now set to green. I also have made the Flutter text widget color white in order for it to look good.

So in this way you can easily change the Flutter Flatbutton color. I would love to answer if you have any questions regrading Flutter Flatbutton. The complete source code of the customized Flutter Flatbutton color is given in the below section.

Custom Flutter Flatbutton Color 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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: FlatButton(
                    onPressed: () {},
                    color: Colors.green,
                    child: Text('Flat button Custom Color',
                        style: TextStyle(color: Colors.white))))));
  }
}

Conclusion

To conclude, you now have a practical understanding of what needs to be done in order to change the color of Flutter Flatbutton. Your time is well appreciated. I also have other informative posts about Flutter widgets, Flutter app development, Flutter animations, amazing Flutter templates with source code, and many more. Thanks for reading.