How To Change Flutter Card Color – Easy Flutter Guide

flutter card color

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',
        ),
      ),
    )
flutter card default color
You can see that this is the default background color of Flutter card widget. Let’s now customize it.

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),
        ),
      ),
    )
flutter card color
You can see that the Flutter card color is now successfully changed.
Hope you now have a complete practical knowledge of how to customize Flutter card color.
I would love to answer if you still have any questions related to the customization of Flutter card color.
The complete source code is given below in which Flutter card color is properly customized.

Custom Flutter Card Color Source Code

flutter card 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: 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.

Leave a Comment

Your email address will not be published.