Flutter: How do I navigate to a new screen using DropDownMenuItems

I want to be able to navigate to a new screen when I choose MEN and another screen when I choose WOMEN.
I've tried and did not seem to have any luck. There seems to be nothing on this on the web.
Please how d I do this?

Here is my code:

return Scaffold(
appBar: AppBar(
title: DropdownButtonHideUnderline(
child: new DropdownButton(
value: null, //Have no idea what to put here
items: <DropdownMenuItem>[
new DropdownMenuItem(
child: new Text('MEN', style: style),
),
new DropdownMenuItem(
child: new Text('WOMEN', style: style),
),
],
onChanged: null,
),
),
),
);


1 Answer
1

First you should add value in DropDownMenuItem as

new DropdownMenuItem(
value: "MEN",
child: new Text('MEN', style: style),
),


Then inside onChanged you should check value and manage navigation.

return Scaffold(
appBar: AppBar(
title: DropdownButtonHideUnderline(
child: new DropdownButton(
value: "MEN", //Default value
items: <DropdownMenuItem>[
new DropdownMenuItem(
value: "MEN",
child: new Text('MEN', style: style),
),
new DropdownMenuItem(
value: "WOMEN",
child: new Text('WOMEN', style: style),
),
],
onChanged: (v) {
Widget widget;
if (v == "MEN") {
widget = new MenWidget();
} else if (v == "WOMEN") {
widget = new WomenWidget();
}
Navigator.push(
context,
MaterialPageRoute(builder: (context) => widget),
);
},
),
),
),
);


UPDATE ACCORDING TO COMMENT

To update body according to selection, you should use StatefulWidget.

class DropDownButtonScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _DropDownButtonScreenState();
}
}

class _DropDownButtonScreenState extends State<DropDownButtonScreen> {
String ddValue;

@override
void initState() {
super.initState();
ddValue = "MEN";
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: DropdownButtonHideUnderline(
child: new DropdownButton(
value: ddValue, //Default value
items: <DropdownMenuItem>[
new DropdownMenuItem(
value: "MEN",
child: new Text('MEN'),
),
new DropdownMenuItem(
value: "WOMEN",
child: new Text('WOMEN'),
),
],
onChanged: (v) {
ddValue = v;
setState(() {});
},
),
),
),
body: getBody(),
);
}

Widget getBody() {
if (ddValue == "MEN") {
return Center(child: Text("Widget for men"));
} else if (ddValue == "WOMEN") {
return Center(child: Text("Widget for Women"));
}
return Center(child: Text("Widget not found"));
}
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.