Container box shadow in flutter

Introduction

Box shadows play a crucial role in the UI design of an app; they give depth and dimension to a card, container, or maybe an image. It is very important for a beginner to learn how to implement box shadows in Flutter.

These are some reasons why shadows in the UI are important.

1. Depth and dimension
2. Visual hierarchy
3. Usability and feedback
4. Contrast and legibility
5. Aesthetics and polish
6. Consistency and branding

BoxShadow class

To cast a shadow in Flutter, we use the BoxShadow class. The casted shadow can also be of non-rectangular shapes; for example, if a container is square, the shadow will also be square; if the shape is circular, the shadow will also be circular.

Constructor

    BoxShadow(
        {
            Color color = const Color(_kColorDefault),
            Offset offset = Offset.zero, 
            double blurRadius = 0.0, 
            double spreadRadius = 0.0, 
            BlurStyle blurStyle = BlurStyle.normal
        }
    )
                    

Properties

• Color: This property defines the color of the shadow. For example, you can give Colors.black or Colors.blue.
• offset: The offset property defines the position of the shadow relative to the container. A negative value positions the shadow to the left and upward, while a positive value positions the shadow to the right and downward.
• blurRadius: This property applies blurring to a shadow; a higher number gives a more blurred and diffused shadow, while a lower number gives a sharper shadow.
• spreadRadius: This property determines the size of the shadow. A positive value will extend the shadow beyond the boundaries of the container, while a negative value will make the shadow shrink inward.

    BoxShadow(
      color: Colors.black.withOpacity(0.5), // Semi-transparent black shadow
      offset: Offset(3, 3), // Shadow offset (3 units to the right, 3 units down)
      blurRadius: 10, // Blur radius
      spreadRadius: 2, // Spread radius
    )