I have been playing around with the drawer and the items inside change some buttons in the body of the scaffold.
What can I do to have this drawer close when the user clicks on an item?
I have used the Navigator.POP(context);
however it will not close the drawer.
Here is my code:
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
int _modIndex = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(child: Text('Choose a mod'),),
ListTile(
title: const Text('Wheels'),
onTap: () {
setState(() {
_modIndex = 0;
});
Navigator.pop(context);
},
),
ListTile(
title: const Text('Suspension'),
onTap: () {
setState(() {
_modIndex = 1;
});
Navigator.pop(context);
},
),
ListTile(
title: const Text('Body Colour'),
onTap: () {
setState(() {
_modIndex = 2;
});
Navigator.pop(context);
},
)
],
),
...
I'm not sure what is wrong.
CodePudding user response:
this error can still happens when you use a context that is a parent of MaterialApp/WidgetApp.
This happens because when you do Navigator.of(context), it will start from the widget associated to the context used. And then go upward in the widget tree until it either find a Navigator or there's no more widget. read more
Separate MaterialApp
from Home
widget, means create another widget to have context.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(home: HomeWidget());
}
}
class HomeWidget extends StatefulWidget {
HomeWidget({Key? key}) : super(key: key);
@override
_HomeWidgetState createState() => _HomeWidgetState();
}
class _HomeWidgetState extends State<HomeWidget> {
int _modIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("title"),
),
body: Center(
child: Text("_modIndex $_modIndex "),
),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
child: Text('Choose a mod'),
),
ListTile(
title: const Text('Wheels'),
onTap: () {
setState(() {
_modIndex = 0;
});
Navigator.pop(context);
},
),
ListTile(
title: const Text('Suspension'),
onTap: () {
setState(() {
_modIndex = 1;
});
Navigator.pop(context);
},
),
ListTile(
title: const Text('Body Colour'),
onTap: () {
setState(() {
_modIndex = 2;
});
Navigator.pop(context);
},
)
],
),
));
}
}
CodePudding user response:
First create a ScaffoldState key
GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
Scaffold(
key: _scaffoldKey,)
Now you can close the drawer using the closeDrawer()
method.
closeDrawer() async {
if (_scaffoldKey.currentState.isDrawerOpen) {
_scaffoldKey.currentState.openEndDrawer();
}
}