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.
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