How To Easily Change Flutter Container Shadow Color

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),
          ),
        )

You can see the default Flutter container shadow color in the above image. Let’s now see how to change that shadow color.

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)

You can see that the Flutter container shadow color is changed successfully.

Now you can use and properly customize the Flutter container shadow color. There’s no need to hold off if you have any questions regarding Flutter container shadow color. I would love to respond to all.

Below is the source code of the customized Flutter container shadow color.

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),
          ),
        ),
      ),
    ));
  }
}

Conclusion

To conclude this post, you now know what Flutter container shadow color is and how you can utilize and customize it in your Flutter applications. Let me have your valuable feedback on this post. Thank you for reading this Flutter post.