Diagonal Design and Skew Container in Flutter

Question

I want to achieve the layout as attached image in this question there are 3 colors: navy, purple, and white. I'm aware that custom clipper can be used, but I'm unable to make one and what values to use in it. A solution with explanation will be quite helpful

This is the outcome I'm trying to achieve

Answer 1

I am using CustomPaint for this

class AppU extends StatelessWidget {
  const AppU({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: BodyPainter(),
        size: Size.infinite,
      ),
    );
  }
}

class BodyPainter extends CustomPainter {
  final bottomPadding = 48;
  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path()
      ..lineTo(size.width, 0)
      ..lineTo(size.width, size.height * .65) //65& on left
      ..lineTo(0, size.height - bottomPadding)
      ..lineTo(0, 0);

    Paint paint = Paint()..color = Colors.blue;

    canvas.drawPath(path, paint);
    // bottom line

    paint
      ..color = Colors.green
      ..strokeWidth = 20;
    canvas.drawLine(Offset(-20, size.height - bottomPadding),
        Offset(size.width + 20, size.height * .65), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

You can find more about ui-Path