showMenu flutter: want to show items by horizontal - flutter

Question

i want to create a menu popup horizontal when long press the icon category. i using showMenu function in flutter. but it's displayed in vertical
this is my code:
this is design i want:
I also attach my code
GestureDetector(
onTapDown: _storePosition,
onLongPress: () {
final RenderBox overlay = Overlay.of(context)!
.context
.findRenderObject() as RenderBox;
showMenu(
context: context,
position: RelativeRect.fromRect(
controller.tapPosition & const Size(40, 40),
Offset.zero & overlay.size,
),
items: [
PopupMenuItem<String>(
value: '1',
child: _category(
'assets/icons/category_apartment.png'),
),
PopupMenuItem<String>(
value: '2',
child: _category('assets/icons/category_beer.png'),
),
],
elevation: 8.0,
).then<void>(
(String? itemSelected) async {
print('itemSelected $itemSelected');
},
);
},
child: RepaintBoundary(
key: controller.globalKey,
child: Image.asset('assets/icons/icon_category.png',
height: 25.0),
),
),

Answer 1

You may achieve this using Overlay
Run the code below and adapt it with your code.
It creates an Overlay then adds it next to the item clicked by using context.findRenderObject() to find coordinates. Then the overlay can be removed using Overlay.remove()
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: ProfilePage(),
),
),
);
}
}
class ProfilePage extends StatelessWidget {
const ProfilePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Profile Page',
),
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
const CountryFormField(),
Text("Som Text"),
Text("Som Text"),
],
),
Text("Som Text"),
Text("Som Text"),
Text("Som Text"),
],
),
);
}
}
class CountryFormField extends StatefulWidget {
const CountryFormField({Key? key}) : super(key: key);
#override
_CountryFormFieldState createState() => _CountryFormFieldState();
}
class _CountryFormFieldState extends State<CountryFormField>
with TickerProviderStateMixin {
// focus node object to detect gained or loss on textField
final FocusNode _focusNode = FocusNode();
OverlayEntry? _overlayEntry;
GlobalKey globalKey = GlobalKey();
final LayerLink _layerLink = LayerLink();
OverlayState? overlayState;
#override
void initState() {
super.initState();
overlayState = Overlay.of(context);
WidgetsBinding.instance!.addPostFrameCallback((_) {
globalKey;
});
}
OverlayEntry _createOverlay() {
RenderBox renderBox = context.findRenderObject() as RenderBox;
var size = renderBox.size;
Offset position = renderBox.localToGlobal(Offset.zero);
return OverlayEntry(
builder: (context) => Positioned(
top: position.dy + size.height / 2,
left: size.width,
child: Material(
elevation: 5.0,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
InkWell(
onTap: () {
_overlayEntry?.remove();
_overlayEntry = null;
},
child: Icon(Icons.refresh),
),
Icon(Icons.done),
Icon(Icons.close),
Icon(Icons.search),
],
),
),
));
}
#override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
if (_overlayEntry != null) return;
_overlayEntry = _createOverlay();
overlayState!.insert(_overlayEntry!);
},
child: const Text('SUBMIT'));
}
}