When clicked on the menu item, I want it to redirect to a different page. For example, if I am clicking on 'First', it should redirect to a separate page and similarly for all other items in the list. Basically, I want all the items in the dropdown menu list to be clickable such that they redirect the user to a different page (navigating through dropdown button) so how can this be done?
Padding(
padding: EdgeInsets.only(
right: 30, top: 20, bottom: 10),
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Color.fromARGB(255, 55, 213, 214),
Color.fromARGB(255, 94, 41, 159),
//add more colors
]),
borderRadius: BorderRadius.circular(40),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: dropdownValue,
elevation: 16,
icon: Visibility(
visible: false,
child: Icon(Icons.arrow_downward)),
iconSize: 24,
style: const TextStyle(
color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>[
' First ',
' Second ',
' Third ',
' Fourth '
].map<DropdownMenuItem<String>>(
(String value) {
if (value == dropdownValue) {
return DropdownMenuItem<String>(
value: value,
child: Padding(
padding: EdgeInsets.only(
top: 0,
bottom: 0,
),
child: Text(
value,
style: TextStyle(
color: Colors.white),
),
),
);
} else {
return DropdownMenuItem<String>(
value: value,
child: Padding(
padding: EdgeInsets.only(
top: 0,
bottom: 0,
),
child: Text(
value,
style: TextStyle(
color: Colors.black),
),
),
onTap: () {
Navigator.pushNamed(
context, '/Started');
},
);
}
}).toList(),
),
),
)),
It would be better to use the onChanged
method and remove that onTap
on the individual Widgets.
onChanged: (String? newValue) {
if (newValue != dropdownValue) {
switch (newValue) {
case ' First ':
Navigator.pushNamed(context, '/firstRoute');
break;
case ' Second ':
Navigator.pushNamed(context, '/secondRoute');
break;
case ' Third ':
Navigator.pushNamed(context, '/thirdRoute');
break;
case ' Fourth ':
Navigator.pushNamed(context, '/fourthRoute');
break;
}
}
setState(() {
dropdownValue = newValue!;
});
},