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', ), ), )
Custom Flutter Card Shadow Color (Easy Example Code)
Card( shadowColor: Colors.blue, elevation: 10, child: Padding( padding: const EdgeInsets.all(15), child: Text( 'Flutter card custom shadow color', ), ), )
Customized Flutter Card Shadow Color Complete 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(
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.
