I'm trying to create a screen that have bunch of container with a child of row that have a text and a Icon (can be seen on the image). So when I click the icon I want to show a dialog right next to the icon.

Red one is button, grey one is the dialog I wanted

I manage to show the dialog using aligned_dialog flutter package but the problem are with the positoning of the widget, I can set the position next to the icon that I wanted and I think it might be conflicted with my code to make some widget greyed out (resulting the whole widget background to be grey, before I implement aligned_dialog there was no problem at all).

Code to make some widget grey:

foregroundDecoration: BoxDecoration(
    color: Color(0xFF8A8787),
    backgroundBlendMode: BlendMode.saturation,
),

Code for my aligned_dialog:

GestureDetector(
                          onTap: (){
                            showAlignedDialog(
                              context: context,
                              builder: (BuildContext context) {
                                /// change this return widget to your
                                ///widget that going to show in dialog
                                return Container(
                                  padding: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                                  width: 200,
                                  height: 150,
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(15),
                                    boxShadow: <BoxShadow>[
                                      BoxShadow(
                                        color: Colors.black.withOpacity(0.2),
                                        blurRadius: 4,
                                        offset: Offset(0, 0),
                                        spreadRadius: 0,
                                      ),
                                    ],
                                  ),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      /// Show Header of the dialog
                                      Text(
                                        'What is a client ?',
                                      ),
                                      SizedBox(height: 5),
                                      /// Show the content of the dialog
                                      Text(
                                        'Client is someone'
                                      ),
                                    ],
                                  ),
                                );
                              },
                              followerAnchor: Alignment.topLeft,
                              targetAnchor: Alignment.topCenter,
                              barrierColor: Colors.transparent,
                              avoidOverflow: true,
                            );
                          },
                          child: Container(
                            width: 20,
                            height: 20,
                            child: SvgPicture.asset(
                              'assets/logo/Information.svg',
                            ),
                          ),
                        ),

Is there any way to fix this ? or is there any other package or widget that I can use to achieve my goal ? Thanks before