How to create a ARC shape in bottom sheet modal? - flutter

Question

I am trying to achieve arc shape in bottom sheet modal?
So far i have tried below code, but the shape is not achieved in modal.
class ArcPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Path path = Path();
path.lineTo(0, size.height);
path.quadraticBezierTo(
size.width / 2, size.height - 100, size.width, size.height);
path.lineTo(size.width, 0);
Paint paint = Paint()
..color = Colors.blue
..strokeWidth = 0.0;
canvas.drawPath(path, paint);
paint.color = Colors.blue[600];
}
#override
bool shouldRepaint(ArcPainter oldDelegate) {
return false;
}
}
void _settingModalBottomSheet(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return CustomPaint(
painter: ArcPainter(),
// height: MediaQuery.of(context).size.height / 2 - 20,
// padding: EdgeInsets.all(30),
child: Wrap(
children: <Widget>[
Center(child: Text('Add a new task')),
TextFormField(
decoration: const InputDecoration(
labelText: 'Task *',
),
onSaved: (String value) {
// This optional block of code can be used to run
// code when the user saves the form.
},
validator: (String value) {
return value.contains('#') ? 'Do not use the # char.' : null;
},
),
Divider(),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.grey.shade800,
child: Text('AB'),
),
label: Text('Aaron Burr'),
)
],
),
);
});
}
What would be the best way to change the shape of a modal?
Expecting results as show in the UI(to do list app)

Answer 1

use shape_of_view package to change the shape of the bottom-sheet and backgroundColor to make the bottom-sheet transparent.
showModalBottomSheet(
elevation: 0,
context: context,
backgroundColor: Colors.transparent,
clipBehavior: Clip.hardEdge,
builder: (BuildContext bc) {
return ShapeOfView(
shape: ArcShape(
direction: ArcDirection.Outside,
height: 20,
position: ArcPosition.Top),
child: Container(
color: Colors.white,
child: Padding(
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Container(
color: Colors.pink,
height:50
),
)));
});