How To Change Flutter Card Shadow Color – Easy Flutter Guide

flutter card shadow color

In this post, we’ll learn what Flutter card shadow color is and how to properly change it.

We’ll explain it practically with an easy but proper Flutter example code. We’ll first see what the default Flutter card shadow color is. After that, we’ll change it using a proper practical code example.

After reading this post, you’ll be able to easily customize Flutter card shadow color in your own Flutter apps.

So let’s not wait anymore and just dive right into its implementation.

What is Flutter Card Shadow Color?

As the name suggests, its the color of shadow that Flutter card widget has. Through this shadow, our card widget looks elevated. We can increase or decrease the extent of this shadow to make the button looks more or less elevated. Click here if you are interested in customizing the extent of Flutter card shadow.

Let’s now shift to our main topic of how to change the shadow color of Flutter card widget. For that, we’ll first see its default shadow color, then we’ll customize it practically.

Default Shadow Color of Card Widget

For that, we’ll first define a simple Flutter card widget. Then we’ll pass a Flutter text widget to its child constructor with some padding to create some space between the card borders and text. Also, we’ll given it some elevation so we can see the shadow clearly. See below code:

Card(
      elevation: 10,
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          'Flutter card default shadow color',
        ),
      ),
    )
flutter card widget default shadow color
We can see the default shadow color of card in the above image. Let’s now see how to give it a color of our choice.

Custom Flutter Card Shadow Color (Easy Example Code)

In order to change its shadow color, we have to make use of the shadow color constructor of Flutter card widget class. This constructor takes a color. So for demonstration, we’ll pass a blue color to it. See below code:
Card(
      shadowColor: Colors.blue,
      elevation: 10,
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          'Flutter card custom shadow color',
        ),
      ),
    )
flutter card shadow color
Here you can see that the shadow color of Flutter card widget is successfully customized.
So this is how you can easily customize Flutter card shadow color.
If you still have any questions related to the customization of Flutter card shadow color then do let me know in the comment section. I would be very glad to answer all your questions.
The complete source code of custom Flutter card shadow color is available in the next section.

Customized Flutter Card Shadow Color Complete Source Code

flutter card shadow 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(
      shadowColor: Colors.blue,
      elevation: 10,
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          'Flutter card custom shadow color',
        ),
      ),
    ))));
  }
}

Conclusion

As a conclusion of this post, now you’ve a detailed practical knowledge of how to customize Flutter card shadow color. I’ll be very delighted to have your valuable feedback on this article.

Also, I’d strongly encourage you to read my other articles as well. Thank you for reading this Flutter post.

Leave a Comment

Your email address will not be published.