How to add shadows to Widgets in Flutter

Flutter Aug 1, 2023

Shadows can work wonders in enhancing your Flutter application's visual appeal. In this post, we will explore the power of shadows and learn how to add them to different parts of your application. We will also take a closer look at the properties that control how shadows appear, so you can understand how to create the perfect shadow effect.

Adding shadows to a Container

We will start by adding a shadow to one of the most commonly used widgets in Flutter: the Container widget. First, we set up a simple application inside our main.dart file that displays a centered Container widget with a blue background color:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Widget Shadows Demo')),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: SizedBox(),
          ),
        ),
      ),
    );
  }
}

When we run the main.dart file, you will see a blue Container displayed at the center of the screen.

flutter_displaying_a_blue_container

Now, let us proceed with adding shadows to the Container:

BoxDecaration

Adding shadows to a Container widget in Flutter can be done by using the BoxDecoration class. This class allows you to customize the appearance of the Container, including adding shadows. Here is how you can do it:

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        blurRadius: 25,
        blurStyle: BlurStyle.normal,
        color: Colors.black,
        offset: Offset.zero,
        spreadRadius: 2,
      ),
    ],
  ),
),

In this code snippet, we replaced the color property of the Container with the decoration property. Within the decoration property, we use a BoxDecoration instance. The BoxDecoration allows us to set the background color and add a shadow effect to the Container.

Inside the BoxDecoration we set the colors property to Colors.white, and the boxShadow property to a list containing a single BoxShadow instance to add a shadow. The BoxShadow instance takes the following properties:

  • blurRadius: 25: Determines the blurriness of the shadow. A higher value creates a softer and more diffused shadow.
  • blurStyle: BlurStyle.normal: Sets the style of the blur applied to the shadow. In this case, it is set to a regular blur.
  • color: Colors.black: Sets the color of the shadow to the defined color, which in this example is set to black.
  • offset: Offset.zero: Specifies the shadow's position. Here, Offset.zero means the shadow is directly beneath the Container with no offset in any direction.
  • spreadRadius: 2: Controls how far the shadow spreads from the edges of the Container.

In the upcoming "BoxShadow" section of this post, we will take a closer look at each property of the BoxShadow class. We will provide more detailed examples to demonstrate how adjusting these properties creates different shadow effects.

When we run the code, you will see a white Container with a dark shadow around it.

flutter_displaying_a_white_container_with_shadows

Multiple BoxShadow widgets

As we mentioned earlier, the boxShadow property of the BoxDecoration class can take a list of BoxShadow instances. Let us look at an example to demonstrate how we can use multiple BoxShadow instances:

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        blurRadius: 5,
        color: Colors.blue.withOpacity(0.8),
        offset: Offset(5, 5),
        spreadRadius: 5,
      ),
      BoxShadow(
        blurRadius: 5,
        color: Colors.green.withOpacity(0.8),
        offset: Offset(-5, -5),
        spreadRadius: 5,
      ),
    ],
  ),
),

In this code snippet, we added two BoxShadow instances within the boxShadow property. Each instance has a different color, and one has a positive offset while the other has a negative offset. This creates a shadow around the Container widget with multiple colors:

flutter_displaying_a_container_with_a_blue_and_green_shadow

BoxShadow

As we have learned the BoxShadow class allows you to create shadow effects for widgets in your Flutter application. To better understand its properties, let us explore some exaggerated examples:

1. blurRadius

The blurRadius property controls how blurry the shadow appears. A larger value, such as blurRadius: 100, creates a softer and more noticeable shadow. On the contrary, setting blurRadius: 0 results in a sharp-edged shadow.

BoxShadow(
  blurRadius: 100,
  blurStyle: BlurStyle.normal,
  color: Colors.black,
  offset: Offset.zero,
  spreadRadius: 2,
),

In this example, we set the blurRadius to 100 making the shadow extremely soft and more spread out.

flutter_displaying_a_white_container_with_a_high_blur_radius_shadow

2. blurStyle

The blurStyle property in the BoxShadow class defines the style of blur applied to the shadow.

BoxShadow(
  blurRadius: 100,
  blurStyle: BlurStyle.solid,
  color: Colors.black,
  offset: Offset.zero,
  spreadRadius: 2,
),

In this example, we use blurStyle: BlurStyle.solid, which creates a solid and sharp-edged shadow. It looks different from the softer and more blurred effect of the normal blur style.

flutter_displaying_a_white_container_with_a_solid_blur_style_shadow

3. color

The color property in the BoxShadow class allows you to specify the color of the shadow:

BoxShadow(
  blurRadius: 100,
  blurStyle: BlurStyle.solid,
  color: Colors.blue,
  offset: Offset.zero,
  spreadRadius: 2,
),

In this code, we set color: Colors.blue, which means the shadow will have a blue color. You can use any color you desire, or even gradients for more creative effects.

flutter_displaying_a_white_container_with_a_blue_solid_blur_style_shadow

4. offset

The offset property in the BoxShadow class determines the shadow's position relative to the widget. Here is an example:

BoxShadow(
  blurRadius: 100,
  blurStyle: BlurStyle.solid,
  color: Colors.blue,
  offset: Offset(25, 25),
  spreadRadius: 2,
),

In this case, we set the offset to Offset(25, 25), which means the shadow will be 25 pixels to the right and 25 pixels below the widget. This creates a shadow effect that gives the impression of light coming from the top-left direction.

flutter_displaying_a_white_container_with_a_blue_solid_blur_style_shadow_with_and_offset_to_the_right_and_bottom

As we have seen we can also use negative values to move the shadow in the opposite direction:

BoxShadow(
  blurRadius: 100,
  blurStyle: BlurStyle.solid,
  color: Colors.blue,
  offset: Offset(-25, -25),
  spreadRadius: 2,
),

In this case, we set the offset to Offset(-25, -25), which means the shadow will be -25 pixels to the right and -25 pixels below the widget. This creates a shadow effect that gives the impression of light coming from the bottom-right direction.

flutter_displaying_a_white_container_with_a_blue_solid_blur_style_shadow_with_and_offset_to_the_left_and_top

5. spreadRadius

The spreadRadius property in the BoxShadow class determines how far the shadow spreads from the widget's boundary.

BoxShadow(
  blurRadius: 100,
  blurStyle: BlurStyle.solid,
  color: Colors.blue,
  offset: Offset.zero,
  spreadRadius: 50,
),

In this example, we set spreadRadius: 50, which means the shadow will extend 50 pixels from the edges of the widget. This creates a larger and more prominent shadow effect.

flutter_displaying_a_white_container_with_a_blue_solid_blur_style_shadow_with_a_high_spread_radius

Adding shadows on other Widgets

Now that we have seen how to apply shadows to the Container widget, let us explore how to add shadows to other widgets in Flutter.

Preset shadows

Some widgets come with pre-defined shadows that you can customize using specific properties. For example, the Card widget has built-in shadow support through the elevation and shadowColor properties.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Widget Shadows Demo')),
        body: Center(
          child: Card(
            color: Colors.blue,
            elevation: 20,
            shadowColor: Colors.black,
            child: SizedBox(
              width: 200,
              height: 200,
            ),
          ),
        ),
      ),
    );
  }
}

In this code snippet, we used the Card widget and set its background color to blue. The elevation property controls the depth of the shadow, and we set it to 20, making the shadow more pronounced. The shadowColor property determines the color of the shadow, and we set it to Colors.black, creating a dark shadow for the card.

flutter_displaying_a_card_widget_with_its_own_shadow

Wrapping widgets with a Container

In cases where the predefined shadows are not sufficient, you can wrap the widget with a Container and apply a custom BoxDecoration, as discussed earlier.

Center(
  child: Container(
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          blurRadius: 25,
          blurStyle: BlurStyle.normal,
          color: Colors.grey.withOpacity(0.5),
          offset: Offset.zero,
          spreadRadius: 25,
        ),
      ],
    ),
    child: Card(
      color: Colors.blue,
      child: SizedBox(
        width: 200,
        height: 200,
      ),
    ),
  ),
),

In this code snippet, we wrapped the Card widget with a Container widget. By doing so, we can apply a custom shadow effect to the card using the BoxShadow class. Here, we created a shadow with a blurRadius of 25, a blurStyle of BlurStyle.normal, a color of grey with an opacity of 0.5, an offset of Offset.zero and a spreadRadius of 25.

We also removed the elevation and shadowColor properties from the Card widget to ensure that the custom shadow and the default card shadow do not interfere with each other.

flutter_displaying_a_card_widget_wrapped_by_a_container_widget_to_add_shadows

By using the Container and BoxShadow together with other widgets, you can easily create unique and appealing shadow effects that match your application's design.

Conclusion

Adding shadows to your Flutter application can greatly improve its appearance, making it look more refined and attractive. We have learned that we add shadows using the BoxDecoration and BoxShadow widgets. These allow you to create different shadow effects for your application.

Whether you prefer gentle shadows for an elegant touch or bold shadows for a striking impact, you can customize them using the BoxShadow properties. You can make elements seem like they are floating or create a sense of depth.

Now that you know how to add shadows, have fun experimenting with different styles to make your application visually appealing.

Tags

Tijn van den Eijnde

Recommended for you