dartflutter

Add box shadow to a transparent Container


I'm trying to make a widget that renders one of the circles shown in this image. It is a transparent circle with a box-shadow. The circle should show whichever color or background image that is applied to the parent container. The circle is transparent but what I see is this: a black box shadow and not the background color of the parent. Any suggestions?

Here is what I have so far:

class TransParentCircle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: new Center(
          child: new Container(
            decoration: new BoxDecoration(
              border: new Border.all(width: 1.0, color: Colors.black),
              shape: BoxShape.circle,
              color: Colors.transparent,
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black,
                  offset: Offset(1.0, 6.0),
                  blurRadius: 40.0,
                ),
              ],
            ),
            padding: EdgeInsets.all(16.0),
          ),
        ),
        width: 320.0,
        height: 240.0,
        margin: EdgeInsets.only(bottom: 16.0));
  }
}

Solution

  • As you can see in the BoxShadow class, they subclass the toPaint() method like this :

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

    ... with BlurStyle.normal instead of BlurStyle.outer as we wanted.

    Let's just create a custom BoxShadow that takes the BlurStyle as parameter.

    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 we can use it like this :

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