I want to build a dropdown menu that shows up as a popup when I put my cursor in my icon for example. I have attached a picture below on how I want to be displayed. I have also wrote my code below as an example what I tried to do, although I know its not a good solution. So does anyone knows how can I fix this. Click "image" to see how I want to be fixed
import 'package:flutter/material.dart';
import 'package:prove/responsive/responsive.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
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!();
}
@override
Widget build(BuildContext context) {
return Scaffold(
endDrawer: Drawer(
backgroundColor: const Color(0xFF262533),
elevation: 10,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 30,
),
PopupMenuButton(
tooltip: '',
child: Text(
'Escorts',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
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)),
PopupMenuButton(
tooltip: '',
child: Text(
'Inserieren',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
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),
),
),
),
]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Blog',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Archiv',
style: TextStyle(color: Colors.white),
),
),
),
]),
const Padding(
padding: EdgeInsets.all(10.0),
),
PopupMenuButton(
position: PopupMenuPosition.under,
tooltip: '',
child: const Text(
'Kontakt',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
],
),
),
),
backgroundColor: const Color(0xFF262533),
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))
PopupMenuButton(
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))
PopupMenuButton(
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),
),
),
),
]),
Padding(padding: EdgeInsets.all(10.0)),
if (!Responsive.isMobile(context))
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Blog',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Archiv',
style: TextStyle(color: Colors.white),
),
),
),
]),
const Padding(
padding: EdgeInsets.all(10.0),
),
if (!Responsive.isMobile(context))
PopupMenuButton(
position: PopupMenuPosition.under,
tooltip: '',
child: const Text(
'Kontakt',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
Spacer(),
InkWell(
onHover: (value) {
if (value) openPopUpItem();
},
onTap: () {},
child: PopupMenuButton(
key: popUpButtonKey,
color: Color(0xFF262533),
tooltip: '',
position: PopupMenuPosition.under,
child: Icon(
Icons.person,
color: Colors.white,
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Login',
style: TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Register',
style: TextStyle(color: Colors.white),
),
),
),
],
),),
const Padding(
padding: EdgeInsets.all(10.0),
),
PopupMenuButton(
color: Color(0xFF262533),
tooltip: '',
position: PopupMenuPosition.under,
child: Icon(
Icons.search,
color: Colors.white,
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
PopupMenuItem(
child: ListTile(
title: TextField(
decoration: InputDecoration(
suffixIcon: Container(
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.all(
Radius.circular(8.0))),
child: new IconButton(
style: IconButton.styleFrom(
shape: CircleBorder()),
icon: new Icon(
Icons.arrow_right,
color: Colors.white,
),
onPressed: (() {}),
iconSize: 25,
),
),
filled: true, //<-- SEE HERE
fillColor: Colors.white,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(
width: 1,
color: Color(0xFFE51A72),
),
),
hintText: 'Suchen...',
hintStyle: TextStyle(fontSize: 15),
),
),
),
),
]),
SizedBox(
width: 20,
),
if (!Responsive.isDesktop(context))
Builder(
builder: (context) => IconButton(
onPressed: () {
Scaffold.of(context).openEndDrawer();
},
icon: Icon(
Icons.menu,
color: Colors.white,
size: 30,
))),
],
)
],
),
);
}
}
CodePudding user response：
I am using Global key to find the widget.
openPopUpItem() {
GestureDetector? detector;
searchForGestureDetector(BuildContext element) {
element.visitChildElements((element) {
if (element.widget is GestureDetector) {
detector = element.widget as GestureDetector;
} else {
searchForGestureDetector(element);
}
});
}
searchForGestureDetector(popUpButtonKey.currentContext!);
detector!.onTap!();
}
class PopUpMenuTest extends StatefulWidget {
const PopUpMenuTest({super.key});
@override
State<PopUpMenuTest> createState() => _PopUpMenuTestState();
}
class _PopUpMenuTestState extends State<PopUpMenuTest> {
GlobalKey popUpButtonKey = GlobalKey();
openPopUpItem() {
GestureDetector? detector;
searchForGestureDetector(BuildContext element) {
element.visitChildElements((element) {
if (element.widget is GestureDetector) {
detector = element.widget as GestureDetector;
} else {
searchForGestureDetector(element);
}
});
}
searchForGestureDetector(popUpButtonKey.currentContext!);
detector!.onTap!();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
InkWell(
onHover: (value) {
if (value) openPopUpItem();
},
onTap: () {},
child: PopupMenuButton(
key: popUpButtonKey,
color: Color(0xFF262533),
tooltip: '',
position: PopupMenuPosition.under,
child: Icon(
Icons.person,
// color: Colors.white,
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Login',
style: TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Register',
style: TextStyle(color: Colors.white),
),
),
),
],
),
)
],
),
);
}
}
CodePudding user response：
Try wraping your Icon('your icon) with InkWell()
bool isHover = false;
InkWell(
onTap: (){},
onHover: (val) {
setState(() {isHover = val;//set value to show or not to show dropDown
});
},
child: Icon(Icons.user),
),
Then only show the menu when the condition is met like this
isHover ? PopupMenuButton( ///If true show menu
color: Color(0xFF262533),
tooltip: '',
position: PopupMenuPosition.under,
child: Icon(
Icons.person,
color: Colors.white,
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Login',
style: TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Register',
style: TextStyle(color: Colors.white),
),
),
),
],
) : Container(),///<- else Show nothing