Why is navigator.push not working in my flutter web app?
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)],
)
)
],
),
),
),
);
}
}
Bennett567
Updated on December 27, 2022Comments
-
Bennett567 over 1 year
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!