In this Flutter post, we’ll learn how to change Flutter card color and explain it practically with a proper Flutter example code. We’ll first see what the default background color of Flutter card widget is. Then we’ll change it practically.
After reading this post, you’ll be able to easily customize Flutter card color in your own Flutter apps as well.
So without any delay, let’s jump right into its practical implementation.
What is Flutter Card Color?
It specifies the background color of Flutter card widget.
Let’s now first see the default background color of Flutter card widget and after that, let’s customize it practically using a proper Flutter example code.
Default Flutter Card Color
For that, we have to define a simple Flutter card widget. Also passing a Flutter text widget to its child constructor, just for some decoration and also some padding to distance the text from the borders of card widget. See below code:
Card( child: Padding( padding: const EdgeInsets.all(15), child: Text( 'Flutter card default color', ), ), )
Change Flutter Card Color (Easy Example Code)
In order to change the background color of card widget, we’ve to use the color constructor of Flutter card widget class. This constructor takes a color so we’ll pass a blue color for demonstration. See below code:
Card( color: Colors.blue, // color is now set to blue child: Padding( padding: const EdgeInsets.all(15), child: Text( 'Flutter card custom color', style: TextStyle(color: Colors.white), ), ), )
Custom Flutter Card 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 StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Card(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(15),
child: Text(
'Flutter card custom color',
style: TextStyle(color: Colors.white),
),
),
))));
}
}Conclusion
As a conclusion of this post, hope you now have a complete, in-depth practical understanding of how to customize Flutter card color. I’ll be looking forward at your feedback on this post.
I would also highly encourage you to visit my other articles as well. Thank you for reading this post.
