How To Easily Customize Flutter Container Shadow

In this Flutter post, we will be explaining and implementing Flutter container shadow by the use of an easy Flutter example.

A detailed step by step implementation will be discussed for better understanding. After reading this post, you will implement and customize Flutter container shadow in your own Flutter apps with ease.

What is Flutter Container Shadow?

As the name suggests, Flutter container shadow is the shadow that is used to make the container looks elevated. The shadow is used to make the container look more beautiful. Let’s now practically understand everything about Flutter container shadow using Flutter example.

Default Flutter Container Shadow

To see what the default Flutter container shadow is, we have used a Flutter container widget with some height and width. We have given that Flutter container a background color and also a child Flutter text widget. See the below code:

 Container(
            width: 240,
            height: 50,
            alignment: Alignment.center,
            color: Colors.blue,
            child: Text(
              'Flutter Container default shadow',
              style: TextStyle(color: Colors.white, fontSize: 15),
            ),
          )

There is no default shadow of the Flutter container as seen in the above image.

Implementing Flutter Container Shadow(All Steps)

Now to give shadow to the Flutter container widget, we have to first use the decoration constructor of the container class and pass box decoration to that constructor.

Now by using the box Shadow constructor of the box decoration, we can easily give our container a shadow. This box shadow constructor takes a list of box shadow. Multiple box shadow can be used to give multiple colors and other properties to the same container.

For demonstration, we will use one box shadow and customize its properties to see what changes it will do to the Flutter container shadow. See the below code:

 decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(spreadRadius: 1, blurRadius: 1, color: Colors.black)
              ],
            )

You can see in the above code that we have used the spread radius, blur radius and color constructor. Let’s now discuss and customize the properties of the boxShadow and see what are the usage of these box shadow constructors.

Box Shadow Constructors

The constructors that we will be discussing are as follows:

Color
Blur Radius
Spread Radius
Offset

Color

Color constructor is used to give color to the box shadow. This constructor takes a color, so for demonstration, we have passed it a green color. See below code:

BoxShadow(spreadRadius: 4, blurRadius: 10, color: Colors.green)

You can see that the color of Flutter container shadow is now green. You can pass it whatever color you want.

Spread Radius with Examples

Spread radius constructor is used to increase the extent of the Flutter container shadow and can also be used to decrease it. I takes a double(decimal value) but integer value will work as well(automatically converted). It is used to spread the extent of Flutter container shadow. See below:

Less Spread Radius

Flutter container shadow spread radius

BoxShadow(spreadRadius: 1, blurRadius: 1, color: Colors.black)

More Spread Radius

flutter container box shadow spread radius

BoxShadow(spreadRadius: 5, blurRadius: 1, color: Colors.black)

Blur Radius with Examples

Blur radius constructor is used to increase or decrease the extent of the blur area of the Flutter container shadow. We will see what change we will see by increasing or decreasing the blur radius value. It also takes a double(decimal) value but we can pass integer. See below:

Less Blur Radius

flutter container box shadow blur radius

BoxShadow(spreadRadius: 1, blurRadius: 3, color: Colors.black)

More Blur Radius

flutter container shadow blur radius

BoxShadow(spreadRadius: 1, blurRadius: 10, color: Colors.black)

Offset(Multiple Examples)

Offset constructor is used to change the position of the box shadow. This constructor takes offset and this offset takes two parameters. First one is for the horizontal direction and second one for vertical direction. Both of them takes a double(decimal value) but passing it an integer value will work just fine. We will use some examples to show you how the offset looks with different values and what changes it will do to the Flutter container shadow.

Example 1

offset: Offset(0, 0)

Example 2

flutter container box shadow offset right

offset: Offset(7, 0)

Example 3

offset: Offset(0, 7)

Example 4

offset: Offset(-5, 0)

Example 5

offset: Offset(0, -6)

Example 6

offset: Offset(6, 6)

Example 7

offset: Offset(-6, -6)

Now you have a complete and better idea of how to use and properly customize the Flutter container shadow. Don’t hold your words back if you have any questions related to Flutter container shadow. I would love to answer all.

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

Custom Flutter Container Shadow 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: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                    spreadRadius: 2,
                    blurRadius: 6,
                    color: Colors.black54,
                    offset: Offset(4, 6)),
              ],
              color: Colors.blue,
            ),
            width: 240,
            height: 50,
            alignment: Alignment.center,
            child: Text(
              'Flutter Container Custom Shadow',
              style: TextStyle(color: Colors.white, fontSize: 15),
            ),
          ),
        ],
      ),
    )));
  }
}

Conclusion

To conclude this Flutter post, hope you now know what Flutter container shadow is and how to use and customize Flutter container shadow in your Flutter apps easily. Don’t hesitate to share your valuable feedback. Thank you for reading this post.