Flutter 自定义Drawer 滑出位置的大小实例代码详解

class CustomDrawer extends StatelessWidget {

 final double elevation;

 final Widget child;

 final String semanticLabel;

 final double widthPercent;

 const CustomDrawer({

  Key key,

  this.elevation = 16.0,

  this.child,

  this.semanticLabel,

  this.widthPercent = 0.7,

 }) :

  assert(widthPercent!=null&&widthPercent<1.0&&widthPercent>0.0)

  ,super(key: key);

 @override

 Widget build(BuildContext context) {

  assert(debugCheckHasMaterialLocalizations(context));

  String label = semanticLabel;

  switch (defaultTargetPlatform) {

   case TargetPlatform.iOS:

    label = semanticLabel;

    break;

   case TargetPlatform.android:

   case TargetPlatform.fuchsia:

    label = semanticLabel ?? MaterialLocalizations.of(context)?.drawerLabel;

  }

  final double _width=MediaQuery.of(context).size.width*widthPercent;

  return Semantics(

   scopesRoute: true,

   namesRoute: true,

   explicitChildNodes: true,

   label: label,

   child: ConstrainedBox(

    constraints: BoxConstraints.expand(width: _width),

    child: Material(

     elevation: elevation,

     child: child,

    ),

   ),

  );

 }

}

 @override

 Widget build(BuildContext context) {

  return InkWell(

   onTap: () {

    Navigator.of(context).pop();

    Navigator.of(context).push(new MaterialPageRoute(

      builder: (BuildContext context) => new AccountManagersPage('')));

   },

   child: new CustomDrawer( //调用修改Drawer的方法

    widthPercent:0.5, //设置Drawer滑出位置居屏幕的一半宽度

    child: Container(

     color: Color(0xFF1F1D5B),

     child: Column(

      children: <Widget>[

       Expanded(

        child: ListView(children: <Widget>[

         Column(

          children: <Widget>[

           ListTile(

            title: Text('设备列表',

              style: TextStyle(color: Color(0xFF8B89EF))),

            contentPadding: EdgeInsets.symmetric(

              horizontal: 15.0, vertical: 0.0),

           ),

           ListTile(

             leading: CircleAvatar(

              backgroundImage: new ExactAssetImage(

                'images/menu_lamp_pole.png'),

              radius: 15.0,

             ),

             title: Text('灯杆',

               style: TextStyle(

                color: Color(0xFFffffff),

                fontSize: 18.0,

               )),

             onTap: () {

              Navigator.of(context).pop();

              //Navigator.of(context).push(new MaterialPageRoute(builder:(BuildContext context) => new BigScreenPage(0,'灯杆列表')));

              Navigator.of(context).push(new MaterialPageRoute(

                builder: (BuildContext context) =>

                  new MainPoleView()));

             }),

           // Divider(),

           ListTile(

             leading: CircleAvatar(

              backgroundImage:

                new ExactAssetImage('images/menu_charge.png'),

              radius: 15.0,

             ),

             title: Text('充电桩',

               style: TextStyle(

                color: Color(0xFFffffff),

                fontSize: 18.0,

               )),

             onTap: () {

              Navigator.of(context).pop();

              Navigator.of(context).push(new MaterialPageRoute(

                builder: (BuildContext context) =>

                  new BigScreenPage(6, '充电桩列表')));

             }),

           ],

         )

        ]),

       )

      ],

     ),

    ),

   ),

  );

 }