Not able to align floating action menu in flutter - flutter

Question

I have this menu on the floating button , but I could not align it correctly,
I want it to show directly above the floating button, this is how it looks in red box:
I want the pop up menu to be like this in red box , I tried to change offset number but did not work it just moves left and right
please help me find a solution I'm really struggling, I provided the code below please check it out
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: myPopMenu(context),
backgroundColor: Colors.white,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNav(
onChange: (a) {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(
builder: (c) => AppPage(initialPage: a,)),
(route) => false);
},
),
);
}
Widget myPopMenu(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(
cardColor: Colors.white60,
),
child: PopupMenuButton(
offset: const Offset(-90, 100),
icon: Image.asset('assets/logo.png', fit: BoxFit.cover, height: 40),
onCanceled: () {
setState(() {
isClicked = false;
});
},
onSelected: (value) {
setState(() {
isClicked = false;
});
print('pop up clicked');
if (value == 0) {
alertRate();
} else if (value == 1){
alertServices();
}else if (value == 2) {
alertAdditonalInfo();
}else if (value == 3){
alertReport();
}
},
itemBuilder: (context) {
setState(() {
isClicked = true;
});
return [
PopupMenuItem(
child: Center(
child: Text(
'Rate & Review',
style: TextStyle(color: Colors.black),
),
),
value: 0,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Edit Available Services',
style: TextStyle(color: Colors.black),
),
),
value: 1,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Edit Social Accounts',
style: TextStyle(color: Colors.black),
),
),
value: 2,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Report an Issue',
style: TextStyle(color: Colors.black),
),
),
value: 3,
),
];
}),
);
}

Answer 1

You can use stack and positioned widget to place it at specific height above bottom nav bar like this
class Sample extends StatelessWidget {
const Sample({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: [
Positioned(
bottom: 30,
child: Container(
color: Colors.grey,
width: 50,
height: 30,
child: Text('Hello'),
),
)
],
,
);
}
}