1

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 enddrawerwhich 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:

enter image description here

If I use endDraweit 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

aiden
  • 41
  • 5

0 Answers0