During the development of Flutter, the frequency of use of the Drawer control is relatively high. In fact, for those who have experience in mobile development, the Drawer control in Flutter is equivalent to the "drawer" effect in ios development or Android development. From the side The bar slides out of the navigation menu. The general usage of the Drawer control in Flutter is not much introduced, a lot of tutorials online.
So this blog post shares a knowledge point that there is not much online tutorials, that is, the size of the custom Drawer slide-out position, the custom Drawer slide-out position needs to modify the widthPercent property of a double, widthPercent generally default value is 0.7, If you want to modify the default value of widthPercent, or set any value greater than 0 and less than 1, you can set it according to this. The specific operations are as follows:
1. First encapsulate this method (the inspector can directly copy and use)
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,
),
),
);
}
}
2. Where to call
@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 (// Call the method to modify Drawer
widthPercent: 0.5, // Set the drawer slide out position to half the width of the screen
child: Container(
color: Color(0xFF1F1D5B),
child: Column(
children: <Widget>[
Expanded(
child: ListView(children: <Widget>[
Column(
children: <Widget>[
ListTile (
title: Text ('Device List',
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 ('Light pole',
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, 'Light pole list')));
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 ('Charging pile',
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, 'Charging pile list')));
}),
],
)
]),
)
],
),
),
),
);
}
The effect is as follows:
The above is the whole content of this chapter, welcome to pay attention to the WeChat public account of the three shopkeepers "iOS development by three shopkeepers", Sina Weibo of the three shopkeepers "Three shopkeepers 666", welcome to follow!
WeChat public account of the three shopkeepers:
Sina Weibo of the three shopkeepers:
