How to Add Box Shadow to a Transparent Container In Flutter ?

3 min read
How to Add Box Shadow to a Transparent Container In Flutter
How to Add Box Shadow to a Transparent Container In Flutter

Container Widget is nothing but the parent widget that contains a child widget and manages its property like height, width, color, background, and so on. So this is time for something like How to Add Box Shadow to a Transparent Container Widget In Flutter?

How to Add Box Shadow to a Transparent Container In Flutter?

Box Shadow is nothing but Shadow cast by a Box. Code Snippet will look like the below:

Paint toPaint() {
  final Paint result = Paint()
    ..color = color
    ..maskFilter = MaskFilter.blur(BlurStyle.normal, blurSigma);
  assert(() {
    if (debugDisableShadows)
      result.maskFilter = null;
    return true;
  }());
  return result;
}

Now we need to create a Custom Box聽 will look like below:

import 'package:flutter/material.dart';

class CustomBoxShadow extends BoxShadow {
  final BlurStyle blurStyle;

  const CustomBoxShadow({
    Color color = const Color(0xFF000000),
    Offset offset = Offset.zero,
    double blurRadius = 0.0,
    this.blurStyle = BlurStyle.normal,
  }) : super(color: color, offset: offset, blurRadius: blurRadius);

  @override
  Paint toPaint() {
    final Paint result = Paint()
      ..color = color
      ..maskFilter = MaskFilter.blur(this.blurStyle, blurSigma);
    assert(() {
      if (debugDisableShadows)
        result.maskFilter = null;
      return true;
    }());
    return result;
  }
}

Now user can use it like the below:

new CustomBoxShadow(
  color: Colors.black,
  offset: new Offset(5.0, 5.0),
  blurRadius: 5.0,
  blurStyle: BlurStyle.outer
)

User can also give try to code snippet like the below:

Container(
height: 200.0,
decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        blurRadius: 25.0, // soften the shadow
        spreadRadius: 7.0, //extend the shadow
        offset: Offset(
          15.0, // Move to right 10  horizontally
          5.0, // Move to bottom 5 Vertically
        ),
      )
    ],
);
child: Text(" 馃尮", style:TextStyle(fontSize:30)),
);

User can also give try to code snippet like the below:

  Container(
    height: 210.0,
    decoration: BoxDecoration(
        boxShadow: [
          new BoxShadow(
            color: Colors.grey,
            blurRadius: 10.0,
          ),],

    ),
  child: ClipPath(
    clipper: ShapeBorderClipper(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10))
        )
    ),
    child: Container(
      height: 200.0,
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
                left: BorderSide(
                    color: Theme.of(context).primaryColor,
                    width: 7.0
                )
            )
        ),
      child: Text("kokoko"),
    ),
  ),
);

Conclusion:

In this article, We have been through How to Add Box Shadow to a Transparent Container Widget In Flutter?

Thanks for being with us on a Flutter Journey.
Thanks for Reading !!! Keep Learning !!!

Hope you like our article. Do share your thoughts on the same.

FlutterAgency.com聽is our portal Platform dedicated to聽Flutter Technology聽and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.

FlutterAgency.com聽is one of the most popular online portal dedicated to聽Flutter Technology聽and daily thousands of unique visitors come to this portal to enhance their knowledge on聽Flutter.

Leave a Reply