How to Use GlobalKeys in multiple widgets using Flutter? - flutter

Question

I'm trying to build a responsive navbar using Flutter where I'm using Popupbuttons too. I wanted to show up my PopmenuItems when I put my cursor over the button. To do that I build a Global Keys with a class to fix this, but when I did this, it worked only in one of my Popupmenubuttons. The error was that a Global Key can not be used in more than one widget. Does anyone knows how can I fix this. Below you can find my code.
GlobalKey popUpButtonKey = GlobalKey();
openPopUpItem() {
GestureDetector? detector;
searchForGestureDetector(BuildContext element) {
element.visitChildElements((element) {
if (element.widget != null && element.widget is GestureDetector) {
detector = element.widget as GestureDetector;
} else {
searchForGestureDetector(element);
}
});
}
searchForGestureDetector(popUpButtonKey.currentContext!);
detector!.onTap!();
}
body: ListView(
children: [
Row(
children: <Widget>[
const SizedBox(
width: 20,
),
SizedBox(
height: 80,
width: 185,
child: Image.asset('assets/images/logo2.png'),
),
Spacer(),
if (!Responsive.isMobile(context))
PopupMenuButton(
tooltip: '',
child: Text(
'Escorts',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
if (!Responsive.isMobile(context))
InkWell(
onHover: (value) {
if (value) openPopUpItem();
},
onTap: () {},
child: PopupMenuButton(
key: popUpButtonKey2,
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Agenturen & Clubs',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Escortagenturen',
style: TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Bordelle',
style: TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Laufhauser',
style: TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Saunaclubs',
style: TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Domina & BDSM-Studios',
style: TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Tantra & Massaage-Studios',
style: TextStyle(color: Colors.white),
),
),
),
]),
),
Padding(padding: EdgeInsets.all(10.0)),
if (!Responsive.isMobile(context))
PopupMenuButton(
tooltip: '',
child: Text(
'Inserieren',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
if (!Responsive.isMobile(context))
InkWell(
onHover: (value) {
if (value) openPopUpItem();
},
onTap: () {},
child: PopupMenuButton(
key: popUpButtonKey,
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Werben',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Werbenformate',
style: TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Preise',
style: TextStyle(color: Colors.white),
),
),
),
]),
),

Answer 1

As the Global Key can not work on multiple widgets, you can create a List of Global Object Key ...
Changing GlobalKey with GlobalObjectKey
final List<GlobalObjectKey> keyList =
List.generate(10, (index) => GlobalObjectKey(index));