Я бы сделал это с прозрачным ящиком, на котором вы рисуете свою фигуру с CustomPainter
. Сделайте ящик прозрачным, используя тему и canvasColor: Colors.transparent
Важно : установите elevation
ящика на 0, в противном случае вы увидите край прозрачного ящика.
Scaffold(
appBar: AppBar(title: Text(title)),
body: Center(child: Text('Custom Drawer Shape')),
drawer: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.transparent, // set the Color of the drawer transparent; we'll paint above it with the shape
),
child: Drawer(
elevation: 0, // set elevation to 0, otherwise you see the transparent drawer a little bit
child: Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: CustomPaint(
painter: DrawerPainter(color: Colors.white), // this is your custom painter
child: ListView(
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
children: <Widget>[
// Add your menu e.g. with ListTile
],
),
),
),
),
),
);
// Class which draws the custom shape
class DrawerPainter extends CustomPainter {
final Color color;
DrawerPainter({this.color = Colors.black});
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = color
..strokeWidth = 3
..style = PaintingStyle.fill;
canvas.drawPath(getShapePath(size.width, size.height), paint);
}
// This is the path of the shape we want to draw
Path getShapePath(double x, double y) {
return Path()
..moveTo(0, 0)
..lineTo(x / 2, 0)
..quadraticBezierTo(x, y / 2, x / 2, y)
..lineTo(0, y);
}
@override
bool shouldRepaint(DrawerPainter oldDelegate) {
return oldDelegate.color != color;
}
}