Box Shadows in Flutter Containers

Introduction

With the help of the potent UI toolkit Flutter, developers can produce natively developed desktop, web, and mobile apps from a single codebase. Flutter’s simplicity of use in creating visually appealing and rich user interfaces is one of its primary characteristics. Flutter’s Container widget is a widely used and adaptable widget that lets developers mix several widgets to create a unified design element. Adding a box shadow is one of the most requested improvements for improving a Container’s visual appeal. We will look at how to apply box shadows to a Container widget in Flutter in this blog post.

What is a Box Shadow?

A box shadow is a shadow effect that can be applied to a widget to give it a sense of depth and elevation. This effect can make UI elements stand out more and create a more polished and sophisticated look. In Flutter, the BoxDecoration class is used to define the visual properties of a Container widget, including box shadows.

Adding a Box Shadow to a Container Widget

To add a box shadow to a Container widget, you need to use the BoxDecoration class and its boxShadow property. Here’s a step-by-step guide on how to do this:

Create a Container Widget: Start by creating a Container widget in your Flutter app.

Container(
  width: 200,
  height: 200,
  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
      ),
    ],
  ),
)

BoxDecoration Class: The decoration property of the Container widget takes a BoxDecoration object. This object allows you to define various visual properties, including the color, borderRadius, and boxShadow.

BoxShadow Class: The boxShadow property of the BoxDecoration class takes a list of BoxShadow objects. Each BoxShadow object defines a single shadow with properties such as color, blurRadius, spreadRadius, and offset.

• color: The color of the shadow.
• blurRadius: The blur radius of the shadow. A higher value means a more blurred shadow.
• spreadRadius: The spread radius of the shadow. A higher value means the shadow spreads out more.
• offset: The offset of the shadow from the widget. It takes an Offset object with dx and dy values representing the horizontal and vertical displacement of the shadow.

Example

Here is a complete example demonstrating how to add a box shadow to a Container widget in Flutter:

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('Box Shadow Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 3),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Conclusion

Adding a box shadow to a Container widget in Flutter is a straightforward process that can significantly enhance the visual appeal of your application. You can also set Border of that container. By using the BoxDecoration class and its boxShadow property, you can create beautiful and sophisticated UI elements that stand out. Experiment with different shadow properties to achieve the desired effect and make your app’s design more engaging and polished.