flutterdartflutter-custompainterflutter-custompaint

Adding a container on top of custompaint Flutter


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 :

enter image description here

And this is the result i have :

enter image description here


Solution

  • 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),
                  },
                ),
              ],
            ),
          )
        ],
      ),
    );