How to create the following shape in flutter? - flutter

Question

I wan to create above shape in flutter. I was using clipPath for getting the sides right but i couldn't get the rounded corners.

Answer 1

You must use for this shape flutter_custom_clippers package from here.
Add this dependency in your pubspec.yaml file
Try below code hope its help to you
Import package in your file
import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';
Your Widget:
ClipPath(
clipper: RoundedDiagonalPathClipper(),
child: Container(
height: 320,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(
50.0,
),
),
color: Colors.grey[300],
),
child: Center(
child: Text("Your Shape"),
),
),
),
Your result screen->

Answer 2

You can do this with CustomClipper
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Rounded corner'),
),
body: Container(
decoration: BoxDecoration(
color: Color(0xff240046), borderRadius: BorderRadius.circular(15)),
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 18),
margin: EdgeInsets.symmetric(vertical: 8),
child: ClipPath(
clipper: CustomRectClipper(),
child: Container(
height: 500,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
color: Colors.grey,
),
child: Center(child: Text("RoundedDiagonalPathClipper()")),
),
),
),
);
}
}
class CustomRectClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = new Path()
..lineTo(0.0, size.height)
..lineTo(size.width, size.height)
..lineTo(size.width, 0.0)
..quadraticBezierTo(size.width-50, 0.0, size.width - 60.0, -5.0)
..lineTo(40.0, 150.0) // here you adjust the value as much as you nee
..quadraticBezierTo(0.0, 180.0, 0.0, 220.0);
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
Output: