How To Change Flutter RaisedButton Color

In this article, I will be explaining how to change Flutter RaisedButton color using an easy Flutter code implementation. I will be explaining the implementation of Flutter RaisedButton color step by step so it will be easy for you to understand how to change Flutter RaisedButton color.

What is Flutter RaisedButton Color?

Flutter RaisedButton color as the name suggests, it is the background color of the Flutter RaisedButton. When we define a Flutter RaisedButton then it has a default background color. Let’s see how to change the background Flutter RaisedButton color using a Flutter example.

Default Flutter RaisedButton Color

Let’s first see what the default Flutter RaisedButton color is. For that, we have to define a simple Flutter RaisedButton. See the below code:

 RaisedButton(
             onPressed: () {},
                    child: Text(
                      'Click here',
                    ),
                  )

flutter raisedbutton default background color

As you can see in the above code, we have used the onPressed constructor which is required and also we have passed Flutter text widget to the child constructor of the Flutter RaisedButton. Now as you can see in the above image, it is the default background color of the Flutter RaisedButton.

Change Flutter RaisedButton Color

In order to change the background color of the Flutter RaisedButton, we have to use the color constructor of the Flutter RaisedButton widget class. It takes the color class so we have passed it a color of green for demonstration. See the below code:

  RaisedButton(
             color: Colors.green,
                    onPressed: () {},
                    child: Text(
                      'Click here',
                    ),
                  )

As you can see in the above image, the Flutter RaisedButton color is now green which means the customization of the background Flutter RaisedButton color is successful.

You can pass whatever color you want to the Flutter RaisedButton by following the steps mentioned above. If you still face any difficulties regarding Flutter RaisedButton color then do let me know in the comment section. I would love to answer them.

I have also prepared a custom Flutter RaisedButton design for you in which Flutter RaisedButton color is also customized. The source code is available in the below block.

Beautiful Flutter RaisedButton Design Source Code

flutter raisedbutton 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 StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  RaisedButton(
                    onPressed: () {},
                    color: Colors.green,
                    padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20).copyWith(
                            topLeft: Radius.circular(0),
                            bottomRight: Radius.circular(0))),
                    child: Text(
                      'Custom Flutter Raised Button Color',
                      style: TextStyle(
                          color: Colors.white, fontWeight: FontWeight.w500),
                    ),
                  )
                ],
              ))),
    ));
  }
}

Conclusion

In conclusion, your practical understanding of how to customize Flutter RaisedButton color will now make it simple for you to use it in your Flutter app projects. I would value your valuable feedback on this article. I also invite you to visit my other posts that cover Flutter widgets, Flutter app development, Flutter animations, Flutter templates with free source code and many more. Thanks you for reading this article.