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

CodePudding user response：

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

CodePudding user response：

code snippet :
            

            Stack(
                  children: [
                    //your dialog,
                    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,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),