I'm very new to flutter and I have been trying to create a modern drawer, and I have found one, the problem is the one I have found usesquadraticBezierTo
and enddrawer
which opens the drawer on the right to left but want to usedrawer
which opens the drawer form left to right. here is my code
Widget build(BuildContext context) {
width = MediaQuery.of(context).size.width - 50;
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
drawerScrimColor: Colors.grey.shade900.withOpacity(0.5),
drawer: ClipPath(
clipper: _DrawerClipper(),
child: Drawer(
child: Container(
padding: const EdgeInsets.only(top: 48, bottom: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
color: Colors.blue.shade200,
child: DrawerHeader(
child:Wrap(
children:<Widget>[
Container(
alignment: Alignment.topCenter,
child: CircleAvatar(
maxRadius: 40,
child: Image.asset("assets/profile.png"),
),
),
Container(padding: EdgeInsets.fromLTRB(0, 10, 0, 0), alignment: Alignment.center,
child:Text("Name",style: TextStyle(fontSize: 20,color: Colors.white),
),
),
Container( alignment: Alignment.center,
child:Text("E-mail Address",style: TextStyle(fontSize: 20,color: Colors.white),
),
),
],
),
),
),
ListTile(
title: Center(
child: Text(
"Item1",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)),),],
)),),),
and I use the following class for the clipper
:
class _DrawerClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.moveTo(50, 0);
path.quadraticBezierTo(0, size.height / 2, 50, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
and here is a photo of how it looks:
If I use endDrawe
it looks normal but in my case I want to use drawer
. I assume it has something to do with the quadraticBezierTo
parameters but i'm not sure. how can I fix this?
Thanks for the help