As a Flutter developer, you’re always looking for ways to add style and sophistication to your app’s UI. One way to do this is by using container box shadows to add depth and dimensionality to your widgets. In this post, we’ll explore how to use container box shadows in Flutter and provide a practical example to help you get started.

Table of Contents

What is BoxShadow?

Before we dive into the example, let’s quickly cover what BoxShadow is. BoxShadow is a property in Flutter’s Material widget that allows you to add a shadow effect to a widget, giving it a sense of depth and dimensionality. You can customize the shadow’s color, offset, blur radius, and spread radius to achieve the desired look.

Container BoxShadow Example

Now that we’ve covered the basics, let’s create a simple example of how to use container box shadows in Flutter.

We’ll start by creating a new Flutter project. Open your terminal or command prompt and enter the following command:

flutter create container_box_shadow_example

Dart

Next, open the `main.dart` file and replace the contents with the following code:

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Box Shadow Example',
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Container Box Shadow Example'),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                offset: Offset(4, 4),
                blurRadius: 8,
              ),
            ],
          ),
          child: Center(
            child: Text(
              'Hello, World!',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      )
    );
  }
}

Dart

Let’s break down the code:

1. We create a `MaterialApp` widget and define a `MyHomePage` widget as the home page.

2. We create a `Scaffold` widget with an `AppBar` and a `body` widget.

3. In the `body` widget, we create a `Center` widget to align our container horizontally and vertically

4. We create a `Container` widget with a width, height, and decoration.

5. The decoration includes a `BorderRadius` to give the container a rounded corners, and a `BoxShadow` to add the shadow effect.

6. The `BoxShadow` widget takes four parameters:

`color`: The color of the shadow (we use a grey color with an opacity of 0.5).
`offset`: The offset of the shadow (we use an offset of 4 pixels in both the x and y directions).
`blurRadius`: The blur radius of the shadow (we use a blur radius of 8 pixels).

7. Finally, we add a `Text` widget as the child of the `Container` widget.

Results

Run the app, and you should see a container with a rounded corner and a subtle shadow effect. The shadow is positioned 4 pixels away from the container, and its blur radius is set to 8 pixels, giving it a soft and natural look.

That’s it! With this example, you should have a good understanding of how to use container box shadows in Flutter. Remember to customize the shadow’s properties to achieve the desired look for your app.

Conclusion

Container box shadows are a powerful tool in Flutter that can add depth and dimensionality to your app’s UI. By following this example, you should be able to create a variety of container box shadow effects to enhance your app’s visual appeal.