3 min read

While developing a Flutter app, you may need to add a shadow to some widgets. Adding a shadow helps widgets to stand out from other components on the screen. Flutter allows you to add some material components such as Card, PhysicalModel that add the shadow by default. But sometimes you may need to put a shadow on the Container widget so that you can customize it as per your need. So in this article, we’ll learn to add a Shadow to Container Widget in Flutter.

Here’ what we’ll cover:

Steps to Add Shadow to Container Widget in Flutter

The Container widget has a property called decoration. You can use the BoxDecoration class to add shadow to Container widget in Flutter using the BoxShadow widget. The BoxShadow is a widget that creates a shadow. By default, it comes in black color.

Here are the steps to add shadow to the Container widget:

Step 1: Add the Container widget.

Step 2: Add the decoration parameter (inside Container) and assign the BoxDecoration class.

Step 3: Add the boxShadow parameter (inside BoxDecoration) and assign the BoxShadow class.

Step 4: Add the blurRadius parameter (inside BoxShadow) and set the value to 25.

Step 5: Run the App.

Code Example: 

Container(
  width: 200,
  height: 200,
  decoration: const BoxDecoration(
    boxShadow: [
      BoxShadow(
        blurRadius: 25.0,
        ),
      )
    ],
  ),
  child: Container(
    color: Colors.red,
  ),
)

Output:

Looking to add some style to your Flutter containers? Check out our post on “Add Border to Container in Flutter” to learn how to create beautiful borders that complement your design.

Customizing the Shadow

You can use the various properties under the BoxShadow class such as color, spreadRadius, offset to customize the look and position of the shadow given to the Container widget.

Changing the Color of Shadow

To change the color of the shadow:

  • Add the color parameter (inside BoxShadow) and set the value to Colors.amber.
  • Run the app.

Code Example: 

Container(
  width: 200,
  height: 200,
  decoration: const BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.amber, //New
        blurRadius: 25.0,
      )
    ],
  ),
  child: Container(
    color: Colors.red,
  ),
)

Output:

Extending the Shadow

You change the size of the shadow of the Container by using the spreadRadius property.

To change the color of the shadow:

  • Add the spreadRadius parameter (inside BoxShadow) and set the value to 25.
  • Run the app.

Code Example: 

Container(
  width: 200,
  height: 200,
  decoration: const BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.amber,
        blurRadius: 25.0,
        spreadRadius: 25, //New
      )
    ],
  ),
  child: Container(
    color: Colors.red,
  ),
)

Moving the Shadow

You can move the shadow of the Container by modifying the offset value of the BoxShadow widget.

To move the shadow:

  • Add the offset parameter (inside BoxShadow) and set the value to Offset(20,20,).
  • Run the app.

Code Example 1: 

Container(
  width: 200,
  height: 200,
  decoration: const BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.amber,
        blurRadius: 25.0,
        spreadRadius: 25,
        offset: Offset(
          20,
          20,
        ),
      )
    ],
  ),
  child: Container(
    color: Colors.red,
  ),
)

The above code moves the shadow 20px in the right and downward direction.

Output:

Code Example 2: 

Container(
  width: 200,
  height: 200,
  decoration: const BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.amber,
        blurRadius: 25.0,
        spreadRadius: 25,
        offset: Offset(
          -20,
          -20,
        ),
      )
    ],
  ),
  child: Container(
    color: Colors.red,
  ),
)

The above code moves the shadow 20px in the left and upward direction.

Output:

That’s it. Thanks!

Conclusion

In this tutorial, we learned how to add a Shadow to Container Widget in Flutter with practical examples. We also learned how to customize the shadow of the Container using the various properties of BoxShaow widget.

Would you like to check other interesting Flutter tutorials?

Set Background Image in Flutter The Right Way
Top 3 Ways to Give Flutter Widget Size in Percentage