Draw widget in Flutter

Question

I want to draw the widget like this:

For detail, I will use coordinates. The angle (0, 0), (0, 1) and (1, 1) is easy, the cross line from (0,6, 0) to (1, 1) is easy too, but the border in (0,6, 0) is so hard for me. Any ideal to draw this border?

Answer 1

Here is your Container and Clip Code... and also use Shape Maker to design such layout and you will get clip code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: ClipPath(
          clipper: CustomClipPathTopContainer(),
          child: Container(
            height: 300,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(30)
              )
            )
          ),
        ),
      ),
    );
  }
}

class CustomClipPathTopContainer extends CustomClipper<Path> {

  @override
  Path getClip(Size size) {
    double w = size.width;
    double h = size.height;

    Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth=10.0
      ..color = Colors.black;

    Path path0 = Path();
    path0.moveTo(0,size.height);
    path0.lineTo(0,0);
    path0.quadraticBezierTo(size.width*0.4875583,size.height*-0.0214000,size.width*0.5673083,size.height*0.0330714);
    path0.quadraticBezierTo(size.width*0.6709917,size.height*0.1021143,size.width,size.height);
    path0.lineTo(0,size.height);
    path0.close();
    return path0;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Output