how to add a close icon to a container 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 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 2

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,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),

Answer 3

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 4

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,
                ))
              ],
            ),
          ),
        );
      },
    );
  }