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