Not able to align floating action menu in 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'),
        ),
       )
      ],
     ,
   );
 }
}