In this Flutter post, we will be looking at what Flutter container shadow color is and how to give it any color of our choice. We will be changing the Flutter container shadow color with proper step by step explanation.
An easy Flutter example code will be used for the customization of Flutter container shadow color for better understanding. So let’s not keep you waiting and just dive right into it.
What is Flutter Container Shadow Color?
Flutter container shadow color as the name suggests, it is the color of the shadow that is emitting from the container. We will first see what the default Flutter container shadow color is and then we will change it using a proper Flutter example.
Default Flutter Container Shadow Color(Steps)
To see what the default shadow color of Flutter container is, follow these steps:
Step 1
Container()
We have to define a simple Flutter container widget.
Step 2
width: 240 height: 50 color:Colors.white
Give the container some height, width and color so we can see a Flutter container on our app screen.
Step 3
Use the decoration constructor of the Flutter container widget class and pass it box decoration. Then use the boxShadow constructor of the box decoration. This boxShadow constructor takes a list of boxShadow.
For demonstration, we have passed it a box shadow with a blur radius of 5 and a spread radius of 2. You can use other values. See the below code:
Container( width: 240, height: 50, decoration: BoxDecoration( color: Colors.white, boxShadow: [BoxShadow(spreadRadius: 2, blurRadius: 5)]), alignment: Alignment.center, child: Text( 'Flutter Container Default Shadow Color', style: TextStyle(color: Colors.black, fontSize: 15), ), )

Change Flutter Container Shadow Color
In order to change the Flutter container shadow color, we have to use the color constructor of the box shadow. This constructor takes a color so we have passed blue color to it. See the below code:
BoxShadow( color: Colors.blue, spreadRadius: 2, blurRadius: 5)

Flutter Container Shadow Color Implementation 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 StatelessWidget { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( body: Center( child: Container( width: 240, height: 50, decoration: BoxDecoration(color: Colors.white, boxShadow: [ BoxShadow(color: Colors.blue, spreadRadius: 2, blurRadius: 5) ]), alignment: Alignment.center, child: Text( 'Flutter Container Custom Shadow Color', style: TextStyle(color: Colors.black, fontSize: 15), ), ), ), )); } }