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


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,
),
),
),
);





Get the selected index of dropdownbutton and based on that navigate to a new screen
– Raouf Rahiche
Jul 2 at 13:43




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"));
}
}





Thank you. But rather than navigating to a new screen, I tried displaying the new widget in the Scaffold's body. When i tried doing this, the value on the DropdownButton did not change to thre selected value neither did the widget passed to the body display. How do I solve this?
– PrinceDavitt Michael
Jul 2 at 20:52





I have updated my answer. Please check.
– Dhiraj Sharma
Jul 3 at 5:42





Thanks alot! It worked! I did the same thing but what I did wrong was at the if statement I did not 'return' the new Men or Women widget.
– PrinceDavitt Michael
Jul 3 at 7:14






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.

Popular posts from this blog

PHP contact form sending but not receiving emails

Do graphics cards have individual ID by which single devices can be distinguished?

iOS Top Alignment constraint based on screen (superview) height