Set Box Shadow for Container Widget in Flutter

One excellent technique to provide depth and a polished user experience to items in a mobile application is to apply shadows to them. The BoxShadow class in Flutter makes it easy to apply a shadow to widgets. In addition to thorough examples, customisation advice, and best practices, this tutorial will go over how to set a box shadow for a Container widget in Flutter.

What is Box Shadow in Flutter?

Box Shadow is an attribute that allows you to create a shadow effect for a container or any other widget. This shadow creates a depth effect, making the widget appear as if it’s hovering above the background. Shadows are often used to emphasize important UI elements and improve the overall visual hierarchy of your app. You can use a Column widget to add shadow to the TextField.

Why Use Box Shadows?

Box shadows provide:

• Visual Depth: Makes the interface look more appealing.
• Focus: Highlights specific elements like buttons, cards, or tiles.
• Professional Look: Gives a polished and modern feel to your app.

Basic Syntax for Adding Box Shadow in Flutter

To add a shadow to a Container, you need to use the BoxDecoration class. The BoxDecoration class takes a list of BoxShadow objects using the boxShadow property.

Here’s a simple example:

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
  child: Text('Hello, Flutter!'),
)

Understanding the BoxShadow Properties

The BoxShadow class has several properties to control the appearance of the shadow:

• color: Defines the color of the shadow.
• blurRadius: Specifies how blurry the shadow is; higher values mean more blur.
• spreadRadius: Controls the spread of the shadow. Positive values make the shadow larger, while negative values make it smaller.
• offset: Determines the position of the shadow relative to the widget. The Offset is defined by two parameters: dx (horizontal shift) and dy (vertical shift).

Adding a Basic Box Shadow

To start with a simple example, here’s how you can create a Container with a shadow:

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.3),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(2, 4), // Horizontal and vertical shift
      ),
    ],
  ),
  child: Center(
    child: Text(
      'Box Shadow Example',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

In this example, the Container has a black shadow with a blur effect, giving it a subtle 3D effect.

Customizing Box Shadows

Box shadows can be customized in a variety of ways to suit your app’s style:

1. Changing Shadow Color

The shadow color can be changed to match the theme of your app. For example:

BoxShadow(
  color: Colors.green.withOpacity(0.7), // A green shadow
  spreadRadius: 3,
  blurRadius: 10,
  offset: Offset(4, 4),
)

2. Increasing Blur Effect

The blurRadius can be increased to create a softer shadow effect:

BoxShadow(
  color: Colors.black.withOpacity(0.5),
  spreadRadius: 2,
  blurRadius: 15, // Softer shadow
  offset: Offset(0, 5),
)

3. Adjusting the Spread Radius

The spreadRadius determines how far the shadow extends beyond the widget’s edges:

BoxShadow(
  color: Colors.black.withOpacity(0.4),
  spreadRadius: -2, // Negative spread for inner shadow
  blurRadius: 8,
  offset: Offset(3, 3),
)

Multiple Shadows on a Single Widget

You can apply multiple shadows to the same widget by adding multiple BoxShadow objects in the boxShadow list:

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.blue.withOpacity(0.4),
        spreadRadius: 2,
        blurRadius: 10,
        offset: Offset(-5, -5),
      ),
      BoxShadow(
        color: Colors.red.withOpacity(0.4),
        spreadRadius: 2,
        blurRadius: 10,
        offset: Offset(5, 5),
      ),
    ],
  ),
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Multiple Shadows'),
  ),
)

This example will add both a blue shadow to the top-left and a red shadow to the bottom-right, creating a layered effect.

Advanced Usage: Shadow Effects for Elevated Buttons

Box shadows can also be used to style buttons or other interactive elements. For example:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.deepOrange,
    shadowColor: Colors.deepOrangeAccent,
    elevation: 10, // Higher elevation means deeper shadow
  ),
  onPressed: () {},
  child: Text('Elevated Button with Shadow'),
)

Box Shadow with Rounded Corners

Shadows work well with rounded corners. By combining boxShadow with the borderRadius property, you can create visually appealing designs:

Container(
  decoration: BoxDecoration(
    color: Colors.purple,
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.purpleAccent.withOpacity(0.6),
        spreadRadius: 5,
        blurRadius: 15,
        offset: Offset(0, 8),
      ),
    ],
  ),
  width: 150,
  height: 150,
  child: Center(
    child: Text(
      'Rounded Shadow',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

In this example, the Container has rounded corners with a purple shadow, creating a card-like effect.

Performance Considerations

While shadows can make your app look better, they also come with a cost in terms of performance, especially if you use many shadows with high blurRadius values. Here are a few tips:

• Use Shadows Sparingly: Only add shadows where they are needed.
• Optimize Blur: Keep blurRadius values reasonable to avoid excessive rendering.
• Test on Low-End Devices: Make sure the shadow effects don’t cause performance issues on lower-end devices.

Best Practices for Box Shadows

• Use subtle shadows for a professional look. Avoid using overly dark or harsh shadows unless they are intentional for the design.
• Maintain consistency in shadow styles across the app to give a unified look and feel.
• Consider the color contrast between the shadow and the background. Light shadows are best on dark backgrounds, and dark shadows on light backgrounds.

Conclusion

Box shadows are an essential part of creating visually appealing apps in Flutter. They add depth, focus, and a polished look to your widgets. By mastering BoxShadow properties, you can create a wide variety of effects, from subtle shadows to bold highlights.

With the flexibility of Flutter, you can easily customize shadows to suit your design needs. Experiment with different properties, and don’t be afraid to try multiple shadows to achieve the look you desire.