Is it possible to update PopupMenuButton items while it is still open? - flutter

Question

Hello to everyone reading this,
So i've been trying to get a PopupMenuButton to change the current selected tile while it is still open. I'm using it in a drawer so a user can easily change their status. I've trimmed my code a bit to provide some basic replicable code. It uses a cubit to manage the users 'status'. The status does update, but the selection in the PopupMenuButton does not. Is there an easy way to fix this?
This is how it looks now:
status change
I've already tried:
Wrapping the child of the PopupMenuItem in a StatefulBuilder and making the PopupMenuButton a stateful widget
Wrapping the child of the PopupMenuItem in a BlocConsumer
Wrapping the child of the PopupMenuItem in a container and giving it a color based the cubit status
Giving the PopupMenuItem a ListTile as a child and setting its selected property based on the cubit status
Making the PopupMenuButton a stateful widget and managing the status using setState
This is my (simplified) code:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class DrawerStatusTestScaff extends StatelessWidget {
const DrawerStatusTestScaff({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => UserStatusCubit(),
child: Scaffold(
appBar: AppBar(),
drawer: MenuDrawer(),
),
);
}
}
class MenuDrawer extends StatelessWidget {
const MenuDrawer({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
final double _headerHeight = kToolbarHeight +
((3 * (kToolbarHeight - 20)) + 40) +
MediaQuery.of(context).padding.top;
void _toSettings() {
print('Settings pressed');
Navigator.pop(context);
}
return Container(
width: 305,
child: Drawer(
child: Column(
children: [
SizedBox(
height: _headerHeight,
child: UserAccountsDrawerHeader(
margin: const EdgeInsets.all(0),
currentAccountPicture: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xFFFFFFFF),
),
child: Center(
child: const Text('S.P',
style: TextStyle(
fontSize: 30,
color: const Color(0xFF03A9F4),
)),
),
),
accountName: const Text('S.O.M.E Person'),
accountEmail: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
StatusPopUp(
child: Row(
children: [
const Text('s.person#companymmail.com'),
Padding(
padding: const EdgeInsets.fromLTRB(15, 2, 0, 0),
child: Icon(
Icons.circle,
color: context.watch<UserStatusCubit>().state == 0
? const Color(0xFF00E676)
: context.watch<UserStatusCubit>().state == 1
? const Color(0xFFFFEE58)
: context
.watch<UserStatusCubit>()
.state ==
2
? const Color(0xFFE53935)
: const Color(0xFFBDBDBD),
size: 10,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 15),
child: Tooltip(
message: 'Settings',
child: InkWell(
onTap: _toSettings,
child: const Icon(
Icons.settings,
size: 25,
),
),
),
),
],
),
decoration: BoxDecoration(
color: const Color(0xFF03A9F4),
),
),
),
Expanded(
child: ListView(),
),
],
),
),
);
}
}
class StatusPopUp extends StatelessWidget {
final Widget child;
const StatusPopUp({
Key? key,
required this.child,
}) : super(key: key);
#override
Widget build(BuildContext context) {
final int _dropDownIndex = context.watch<UserStatusCubit>().state;
return PopupMenuButton<int>(
tooltip: 'Change Status',
offset: Offset(0, 51.5 + (_dropDownIndex.toDouble() * 48.5)),
onSelected: (int index) {
context.read<UserStatusCubit>().emit(index);
},
initialValue: _dropDownIndex,
child: child,
itemBuilder: (context) => <PopupMenuEntry<int>>[
PopupMenuItem<int>(
value: 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('Online'),
Padding(
padding: const EdgeInsets.fromLTRB(15, 2, 0, 0),
child: const Icon(
Icons.circle,
color: const Color(0xFF00E676),
size: 10,
),
),
],
),
),
PopupMenuItem<int>(
value: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('Busy'),
Padding(
padding: const EdgeInsets.fromLTRB(15, 2, 0, 0),
child: const Icon(
Icons.circle,
color: const Color(0xFFFFEE58),
size: 10,
),
),
],
),
),
PopupMenuItem<int>(
value: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('Away'),
Padding(
padding: const EdgeInsets.fromLTRB(15, 2, 0, 0),
child: const Icon(
Icons.circle,
color: const Color(0xFFE53935),
size: 10,
),
),
],
),
),
PopupMenuItem<int>(
value: 3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('Offline'),
Padding(
padding: const EdgeInsets.fromLTRB(15, 2, 0, 0),
child: const Icon(
Icons.circle,
color: const Color(0xFFBDBDBD),
size: 10,
),
),
],
),
),
],
);
}
}
class UserStatusCubit extends Cubit<int> {
UserStatusCubit() : super(0);
}