Adding a container on top of custompaint Flutter

Question

Hello fellow Flutter developers,

I'm currently facing an issue with adding a container on top of a custom paint in my Flutter application. I have a custom paint widget that renders a specific drawing, and I would like to overlay a container widget on top of it.

I have tried using a Stack widget and placing the custom paint widget as the bottom layer, followed by the container widget. However, no matter what I try, the container widget doesn't appear on top of the custom paint.

class SectionOne extends StatelessWidget {
  const SectionOne({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Container(
      height: 800,
      child: Column(
        children: [
          SizedBox(
            height: 300,
            child: Stack(
              children: [
                CustomPaint(
                  painter: RPSCustomPainter(),
                  size: Size(
                    MediaQuery.of(context).size.width,
                    250,
                  ),
                  child: const Center(
                    child: Text(
                      "Démultiplier les liens et \ncoopérations de proximité",
                      style: TextStyle(
                        fontSize: 28,
                        color: Colors.white,
                        fontWeight: FontWeight.normal,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
                Positioned(
                  top: 250,
                  left: 10,
                  right: 10,
                  child: Stack(
                    children: [
                      Container(
                        height: 300,
                        margin: EdgeInsets.symmetric(horizontal: 10),
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          OutlinedButtonWidget(
            text: "Voir les réseaux",
            style: OutlinedButtonWidgetStyle.filledOrange,
            onTap: () => {
              Navigator.pop(context),
            },
          ),
        ],
      ),
    );
  }
}


class RPSCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Path path_0 = Path();
    path_0.moveTo(0, 0);
    path_0.lineTo(size.width, 0);
    path_0.lineTo(size.width, size.height * 0.9758115);
    path_0.lineTo(size.width * 0.8525253, size.height * 0.9931386);
    path_0.cubicTo(
        size.width * 0.7427573,
        size.height * 1.006035,
        size.width * 0.6299280,
        size.height * 0.9955675,
        size.width * 0.5289173,
        size.height * 0.9631146);
    path_0.cubicTo(
        size.width * 0.4073333,
        size.height * 0.9240518,
        size.width * 0.2691413,
        size.height * 0.9177153,
        size.width * 0.1411925,
        size.height * 0.9453346);
    path_0.lineTo(0, size.height * 0.9758115);
    path_0.lineTo(0, 0);
    path_0.close();

    Paint paint_0_fill = Paint()..style = PaintingStyle.fill;
    paint_0_fill.shader = LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Color(0xff1F96C7).withOpacity(1),
        Color(0xff32B3AE).withOpacity(1),
      ],
    ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));

    canvas.drawPath(path_0, paint_0_fill);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

This is the result i want :

And this is the result i have :

Answer 1

return Scaffold(
  body: Stack(
    children: [
      CustomPaint(
        painter: RPSCustomPainter(),
        size: Size(
          MediaQuery.of(context).size.width,
          250,
        ),
      ),
      SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 200,
              padding: const EdgeInsets.only(top: 20.0),
              child: const Center(
                child: Text(
                  "Démultiplier les liens et \ncoopérations de proximité",
                  style: TextStyle(
                    fontSize: 28,
                    color: Colors.white,
                    fontWeight: FontWeight.normal,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Container(
              height: 300,
              margin: EdgeInsets.symmetric(horizontal: 20),
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(10),
              ),
            ),
            const SizedBox(height: 20.0,),
            TextButton(
              child: Text('"Voir les réseaux"'),
              style: TextButton.styleFrom(
                  foregroundColor: Colors.white,
                  backgroundColor: Colors.orange,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50.0))),
              onPressed: () => {
                Navigator.pop(context),
              },
            ),
          ],
        ),
      )
    ],
  ),
);