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

CodePudding user response：

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