Flutter: Add box shadow to a transparent Container

Question

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));   } } 

Answer 1

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 )