Why is navigator.push not working in my flutter web app?

Question

I am building a flutter web app. I have a widget which I control with cubit, depending on if the user is logged in or not. If the user is logged in, I displa his profile picture as a dropdown button, and if he selects option A i want to push him to a different page. For some reason, the Navigator isn't doing anything. This is the code for my dropdown button:

                  MouseRegion(
                cursor: SystemMouseCursors.click,
                child: DropdownButton(
                  underline: SizedBox.shrink(),
                  icon: SizedBox.shrink(),
                  hint: CircleAvatar(
                    backgroundImage: NetworkImage(user.photoURL.toString()),
                  ),
                  onChanged: (value) {
                    setState(() {});
                  },
                  items: [
                    DropdownMenuItem(
                        onTap: () {
                          print('tap');
                          Navigator.pushReplacement(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => UserPage(user)));
                        },
                        value: dropdownValue,
                        child: Row(
                          children: [Text('a'), Icon(Icons.ac_unit)],
                        )),
                    DropdownMenuItem(
                        value: menuItem,
                        child: Row(
                          children: [Text('b'), Icon(Icons.access_alarms)],
                        ))
                  ],
                ),
              )

This is the code for the page I want to push to:

import 'package:ez_user_side/cubit/cubit/sign_in_cubit.dart';
import 'package:ez_user_side/pages/page_components/Menu.dart';
import 'package:ez_user_side/pages/page_components/colors.dart';
import 'package:ez_user_side/pages/page_components/right_side.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:ez_user_side/pages/page_components/user_middle.dart';

class UserPage extends StatefulWidget {
  final User user;
  UserPage(this.user);
  @override
  _UserPageState createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SizedBox(
          width: MediaQuery.of(context).size.width / 100 * 13.46,
          child: Row(
            children: [
              Menu(),
              Container(
                color: Colors.red,
              ),
              AccountTab()
            ],
          )),
    );
  }
}

Thank you for your help!

Answer 1

You need to keep track of the selected value of the DropdownButton. You can do that with a simple variable in a StatefulWidget. Here the variable value is used to determine which item is selected. Whenever some DropdownMenuItem is selected you update the variable with the selected DropdownMenuItem's value.

After that, all you need is to react changes in the DropdownButton's onChanged:(value) callback to redirect to some other page or do something else.

Here's the code:

import 'package:flutter/material.dart';

class Solution extends StatefulWidget {
  @override
  _SolutionState createState() => _SolutionState();
}

class _SolutionState extends State<Solution> {

  String value = "home";


  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: SafeArea(
        child: Container(
          child: DropdownButton<String>(
            value: value,
            underline: SizedBox.shrink(),
            icon: SizedBox.shrink(),
            hint: CircleAvatar(
              backgroundImage: NetworkImage(user.photoURL.toString()),
            ),
            onChanged: (value) async{
              setState(() {
                if(value == 'home') {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => UserPage())
                  );
                }
                else {
                  //DO SOMETHING
                }
              });
            },
            items: [
              DropdownMenuItem(
                  onTap: ()  {
                    setState(() {
                      value = 'home';
                    });
                    print('tapped home');
                  },
                  value: 'home',
                  child: Row(
                    children: [Text('a'), Icon(Icons.ac_unit)],
                  )
              ),
              DropdownMenuItem(
                  onTap: () {
                    setState(() {
                      value = 'alarm';
                    });
                    print('tapped alarm');
                  },
                  value: 'alarm',
                  child: Row(
                    children: [Text('b'), Icon(Icons.access_alarms)],
                  )
              )
            ],
          ),
        ),
      ),
    );
  }
}