【Flutter/Dart】(Self-produced class)FooDecoration's issue. Container under Container(Column) is not drawn

Question

I found a class called FooDecoration on the internet, and I am using it. FooDecoration replaces BoxDecoration of Container.

I am having trouble drawing a Container that exists below a Container to which I have applied FooDecoration.

The first image shows the actual situation. The second image is the ideal form we would like to implement. image URL

This code is main class.

class ApexTfquiz extends StatelessWidget {


 @override
  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    int num = 1;

return Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color.fromRGBO(250, 101, 107, 1).withOpacity(1.0),
        Color.fromRGBO(141, 110, 201, 1).withOpacity(1.0),
      ],
      begin: Alignment.topLeft, //ピンク
      end: Alignment.bottomRight, //紫
    ),
  ),
  child: Column(children: <Widget>[

    Stack(
      children:[
        SizedBox(
        height: height,
        width: width,
        child: Scaffold(
            resizeToAvoidBottomInset: false,
            backgroundColor: Colors.transparent,
            body: FutureBuilder<DocumentSnapshot>(
                future: getSnapshot(num),
                builder: (context, snapshot) {
                  if (snapshot.connectionState != ConnectionState.done) {
                    return Center(child: CircularProgressIndicator());
                  } else if (snapshot.hasError) {
                    return const Text("エラーが発生しました");
                  }


                  return Center(
                    heightFactor:20,
                    child:Column(
                    children: [
                      SizedBox(
                        height:height*0.09,
                      ),
                        Container(
                        child: Container(
                            height: height*0.5,
                            width: width,
                            decoration: FooDecoration(
                              insets: EdgeInsets.only(top:10, bottom:10, left: 10, right: 10),
                              blurRadius: 2,
                            ),
                            child: Container(
                              child: Center(child: Text(snapshot.data!.get('question'))),
                            ),
                        ),
                      ),
                      Container( //not worked.  why?
                        height:height*0.2,
                        width: width,
                        decoration: BoxDecoration(
                          color: Colors.red,
                        ),
                        child:Text(
                          "aaaaaaa",
                          style: TextStyle(
                            color: Colors.black,
                          ),
                        ),
                      ),

                    ],
                    ),

                  );
                }
                )
        ),
      ),
        AppBar(
          leading: Builder(
            builder: (BuildContext context) {
              return IconButton(
                splashColor:  Color.fromRGBO(250, 101, 107, 0.5),
                highlightColor: Color.fromRGBO(141, 110, 201, 0.5),
                splashRadius: 25,

                icon: const Icon(Icons.arrow_back_ios),
                onPressed: () { Navigator.pop(context); },
              );
            },
          ),
          foregroundColor: Colors.white.withOpacity(0.85),
          backgroundColor: Colors.transparent,
          elevation: 0,

          toolbarHeight: height * 0.08,
          titleSpacing: 0,
          title: (Text(
            '〇×クイズ',
          )),
        ),
      ]
    )
  ]),
);

  }

This one is FooDecoration.

class FooDecoration extends Decoration {
  final EdgeInsets insets;
  final Color color;
  final double blurRadius;
  final bool inner;

  FooDecoration({
    this.insets = const EdgeInsets.only(top:10, bottom:10, left: 10, right: 10) ,
    this.color = Colors.black,
    this.blurRadius = 2,
    this.inner = false,
  });
  @override
  BoxPainter createBoxPainter([void Function()? onChanged]) => _FooBoxPainter(insets, color, blurRadius, inner);

}

class _FooBoxPainter extends BoxPainter {
  final EdgeInsets insets;
  final Color color;
  final double blurRadius;
  final bool inner;

  _FooBoxPainter(this.insets, this.color, this.blurRadius, this.inner);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    var rect = offset & configuration.size!;
    // Rect rect = const Offset(1.0, 2.0) & const Size(3.0, 4.0);
    canvas.clipRect(rect);
    var paint = Paint()
      ..color = color
      ..maskFilter = MaskFilter.blur(BlurStyle.outer, blurRadius);

    var path = Path();
    if (inner) {
      path
        ..fillType = PathFillType.evenOdd
        ..addRect(insets.inflateRect(rect))
        ..addRect(rect);
    } else {
      path.addRect(insets.deflateRect(rect));
    }
    canvas.drawPath(path, paint);
  }
}

I have described Container under Container, but for some reason it is not rendered.

When this is commented out, the Container is drawn correctly.

 decoration: FooDecoration(
                              insets: EdgeInsets.only(top:10, bottom:10, left: 10, right: 10),
                              blurRadius: 2,
                            ),

Answer 1

I think this action is preventing the other Widgets to be rendered, since it clips the canvas.

canvas.clipRect(rect);

You can put this action in a canvas.save - canvas.restore action, to prevent the canvas from being affected by the clipRect()

canvas.save();
canvas.clipRect(rect);
canvas.restore();