how to add a close icon to a container flutter - flutter

Question

How to add a close icon to a container flutter. Appreciate your help on this.
showDialogFunc(context, img, cal, index, id, cid, status) {
final Size = MediaQuery.of(context).size;
return showDialog(
context: context,
builder: (context) {
return Center(
child: Material(
type: MaterialType.transparency,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
// color: backgroundBlue,
gradient: boxGradient,
),
padding: const EdgeInsets.only(top: 5, bottom: 5),
width: 350,
height: 350,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
img,
height: 250,
width: 250,
fit: BoxFit.contain,
),
],
),
),
),
),
);
},
);
}

Answer 1

You could use the AlertDialog widget and put the close button as part of the title by using a Column. You can place the close button in the top right corner using the alignment property in a Container and setting the titlePadding to zero.
Here is a very simple example:
void _showDialog() {
showDialog(
context: context,
builder: (context) => AlertDialog(
titlePadding: EdgeInsets.zero,
title: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
alignment: FractionalOffset.topRight,
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(Icons.clear),
),
),
const Text('Title'),
],
),
content: const Text('Message here'),
),
);
}
More info in Flutter docs:
AlertDialog
Alignment using FractionalOffset

Answer 2

You should have a look at the Stack widget. It lets you put more widgets, one over the others.
For instance:
Stack(
children: [
Align(
alignment: Alignment.topRight,
child: IconButton(
child: Icon(Icons.close),
onPressed: () => Navigator.of(context).pop()
)
),
Material(
//your code
),
]
)
Something like that should work

Answer 3

Please check the updated code as below with the output. If you want to make cancel button inside, change margin: const EdgeInsets.all(25)
showDialogFunc(context, img, cal, index, id, cid, status) {
return showDialog(
context: context,
builder: (context) {
return Center(
child: Material(
type: MaterialType.transparency,
child: Stack(
alignment: Alignment.topRight,
children: [
Container(
margin: const EdgeInsets.all(25),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.red,
// gradient: boxGradient,
),
padding: const EdgeInsets.only(top: 5, bottom: 5),
width: 350,
height: 350,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
img,
height: 250,
width: 250,
fit: BoxFit.contain,
),
],
),
),
),
InkWell(
onTap: (){
//perform action here.
},
child: Icon(
Icons.cancel,
color: Colors.white,
size: 50,
))
],
),
),
);
},
);
}

Answer 4

code snippet :
Stack(
children: [
//your code,
Positioned(
right: 10,
top: 10,
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Align(
alignment: Alignment.topRight,
child: CircleAvatar(
key: const Key('closeIconKey'),
radius: 15,
backgroundColor: Colors.white,
child: Icon(
Icons.close,
color: Colors.red,
),
),
),
),
),
],
),