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',
),
)
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',
),
)
Beautiful Flutter RaisedButton Design 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 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.
