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?
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