Flutter – BoxShadow Widget

BoxShadow widget in Flutter is used to add a shadow effect to a widget. It is mostly used to provide a visual indication that the widget is elevated or above other widgets. In this article, we will discuss how to use the BoxShadow widget in Flutter.

Properties of BoxShadow Widget

The BoxShadow widget has the following properties:

• color: This property is used to set the color of the shadow.
• offset: This property is used to set the offset of the shadow.
• blurRadius: This property is used to set the blur radius of the shadow.
• spreadRadius: This property is used to set the spread radius of the shadow.
• clipBehavior: This property is used to set the clipping behavior of the shadow.
• elevation: This property is used to set the elevation of the shadow.

Example code

BoxShadow(
  color: Colors.grey.withOpacity(0.5),
  spreadRadius: 5,
  blurRadius: 7,
  offset: Offset(0, 3),
)

In the example code above, we have set the color of the shadow as grey with an opacity of 0.5. The spread radius and blur radius are set to 5 and 7 respectively. The offset of the shadow is set to (0, 3).

Using BoxShadow with a Widget

To use the BoxShadow widget with a widget, we need to wrap the widget with the Container widget and set the decoration property of the Container widget to BoxShadow. Here is an example code:

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Text('BoxShadow Widget Example'),
),

In the example code above, we have wrapped the Text widget with the Container widget and set the decoration property of the Container widget to BoxShadow. We have also set the color, spread radius, blur radius, and offset of the BoxShadow.

Conclusion

In conclusion, the BoxShadow widget in Flutter is used to add a shadow effect to a widget. It has properties such as color, offset, blur radius, spread radius, clip behavior, and elevation. To use BoxShadow with a widget, we need to wrap the widget with the Container widget and set the decoration property of the Container widget to BoxShadow.