Flutter - BoxShadow Widget - Dart

Introduction

The BoxShadow widget in Flutter is used to add a shadow effect to a box. It is commonly used to provide depth and visual separation to UI elements. This widget allows you to customize the properties of the box shadow, such as color, blur radius, spread radius, and offset.

Usage

To use the BoxShadow widget, you need to import the package:flutter/material.dart package.

import 'package:flutter/material.dart';

Creating a BoxShadow

You can create a BoxShadow by instantiating the class with the required properties. The constructor for BoxShadow is as follows:

BoxShadow(
  {Color color = const Color(0xFF000000),
  Offset offset = Offset.zero,
  double blurRadius = 0.0,
  double spreadRadius = 0.0})

• color: The color of the shadow. It can be any Color object. Default is black (Color(0xFF000000)).
• offset: The offset of the shadow relative to the box. It is represented by an Offset object. Default is Offset.zero (no offset).
• blurRadius: The amount of blur applied to the shadow. Default is 0.0 (no blur).
• spreadRadius: The amount by which the shadow should grow or shrink. Default is 0.0 (no spread).

Example

You can create a box with a shadow effect using the BoxShadow widget as shown below:

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        offset: Offset(2.0, 2.0),
        blurRadius: 4.0,
        spreadRadius: 0.0,
      ),
    ],
  ),
)

In this example, we have created a Container widget with a size of 200x200. The decoration property of the Container is set to a BoxDecoration with a white background color. We have added a single BoxShadow with a grey color, an offset of (2.0, 2.0), a blur radius of 4.0, and no spread.

Conclusion

The BoxShadow widget is a powerful tool in Flutter for adding shadow effects to UI elements. It provides various properties to customize the appearance of the shadow. By using the BoxShadow widget effectively, you can enhance the visual appeal and user experience of your Flutter applications.