How to fit any curved to screen? - Flutter - flutter

Question

I am new to flutter and would like to learn how to fit any screen curved from photo.
I'am not able to fit curved to the left, how to fit this shape to every possible screen?
I don't know why but the left side won't fit
I needs help or hints.
class StartAfterRegister extends StatelessWidget {
static Route route() {
return MaterialPageRoute<void>(builder: (_) => StartAfterRegister());
}
#override
Widget build(BuildContext context) {
return Scaffold(body: _profilePage(context));
}
}
Widget _profilePage(BuildContext context) {
return SafeArea(
child: Center(
child: Column(
children: [
const SizedBox(height: 452),
_curved(),
],
),
),
);
// });
}
Widget _curved() {
return Container(
// padding: const EdgeInsets.all(8.0),
// child: Padding(
// margin: const EdgeInsets.only(left: 0.0, right: 28.0),
// const EdgeInsets.fromLTRB(0, 10, 25, 10),
child: CustomPaint(
size: Size(600, (320* 1.1617600000000001).toDouble()),
//You can Replace [WIDTH] with your desired width for
// Custom Paint and height will be calculated automatically
painter: RPSCustomPainter(),
),
);
}
Code was generated with this page :https://fluttershapemaker.com/
I don't know where I made a mistake, wrong portions?
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';
import 'package:flutter_login/components/theme/colors.dart';
class RPSCustomPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Path path_0 = Path();
path_0.moveTo(size.width*1.071853,size.height*1.035738);
path_0.lineTo(size.width*0.07250032,size.height*1.035738);
path_0.lineTo(size.width*0.07250032,size.height*0.3868996);
path_0.cubicTo(size.width*0.07241850,size.height*0.3325917,size.width*0.09748933,size.height*0.2804976,size.width*0.1421620,size.height*0.2421464);
path_0.cubicTo(size.width*0.1969324,size.height*0.1950013,size.width*0.2692701,size.height*0.1829006,size.width*0.3079311,size.height*0.1816967);
path_0.cubicTo(size.width*0.5894098,size.height*0.1729377,size.width*0.8344350,size.height*0.1919213,size.width*0.9302565,size.height*0.1649115);
path_0.cubicTo(size.width*0.9696772,size.height*0.1538054,size.width*1.040485,size.height*0.1192928,size.width*1.071848,size.height*0.03573744);
path_0.cubicTo(size.width*1.069587,size.height*0.2428419,size.width*1.074102,size.height*0.8286341,size.width*1.071853,size.height*1.035738);
path_0.close();
Paint paint_0_fill = Paint()..style=PaintingStyle.fill;
paint_0_fill.color = teal ;
canvas.drawPath(path_0,paint_0_fill);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}

Answer 1

**There is a problem in your custom shape if you want to create more shape be sure you set in widht and size **
like this
simply add this code to custom painter
class RPSCustomPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint_0 = new Paint()
..color = Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.fill
..strokeWidth = 1;
Path path_0 = Path();
path_0.moveTo(size.width, size.height);
path_0.lineTo(size.width * 0.0012500, size.height * 0.9942857);
path_0.lineTo(size.width * 0.0012500, size.height * 0.4271429);
path_0.quadraticBezierTo(size.width * 0.0740625, size.height * 0.2807143,
size.width * 0.1950000, size.height * 0.2800000);
path_0.quadraticBezierTo(size.width * 0.8515625, size.height * 0.3560714,
size.width * 0.9962500, size.height * 0.2828571);
path_0.quadraticBezierTo(size.width * 0.9990625, size.height * 0.2850000,
size.width, size.height * 0.2857143);
path_0.quadraticBezierTo(size.width * 1.0084375, size.height * 0.4992857,
size.width, size.height);
path_0.close();
canvas.drawPath(path_0, paint_0);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
**add this in your child **
import 'package:flutter/material.dart';
class Demo extends StatefulWidget {
const Demo({Key? key}) : super(key: key);
#override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
#override
Widget build(BuildContext context) {
/// this is the width of screen
var width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(),
body: Stack(
children: [
Align(
alignment: Alignment.bottomLeft,
child: Container(
color: Colors.red,
width: width,
child: CustomPaint(
size: Size((width).toDouble(), (width * 0.875).toDouble()),
painter: RPSCustomPainter(),
),
))
],
),
);
}
}