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

thats great @YeasinSheikh but then how can i add text widgets over it like a large title text at top then a smaller text in the middle and the smallest at bottom it would be great if you can add code snippet with an image along with it for understanding — Ashish Purohit, Sep 28 '22 at 19:07
use `CustomPaint(...,child:Column(yourWidgets)`. call child parameter and use it the way you like — Md. Yeasin Sheikh, Sep 28 '22 at 19:10
sorry link isnt working here. you may referring to the Stack widget. — Md. Yeasin Sheikh, Sep 28 '22 at 19:17

score 1 · Accepted Answer · answered Sep 28 '22 at 18:11

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

Quite an elegant solution!! Thanks @Yeasin Sheikh I've accepted the answer — Ashish Purohit, Sep 28 '22 at 19:19

Diagonal Design and Skew Container in Flutter

1 Answers1