How can i place cancel icon on top right corner

Question

Here is my code

 InkWell(
                        onTap: () {
                          Navigator.pop(context);
                        },
                        child: Align(
                          alignment: Alignment(1,-1),
                          child: CircleAvatar(
                            maxRadius: 20,
                            backgroundColor: Colors.transparent,
                            child: Image.asset('assets/cancel.png',height: 30,),
                          ),
                        ),
                      ),

I got this

I want like this

Answer 1

If you are using AlertDialog then you can use icon and iconPadding to keep the close image top right.

  Future<void> _showMyDialog() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          iconPadding: const EdgeInsets.all(0),
          icon: Align(
            alignment: Alignment.topRight,
            child: InkWell(
              onTap: () {
                Navigator.pop(context);
              },
              child: Icon(Icons.close),
              // child: Image.asset(
              //   'assets/cancel.png',
              //   height: 30,
              // ),
            ),
          ),
          content: const SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text('This is a demo alert dialog.'),
                Text('Would you like to approve of this message?'),
              ],
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: const Text('Approve'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

I have removed CircleAvatar because it is used for user Profile Image. This Widget will give extra padding and I was not able to remove the padding. Please check if this solution works.

Answer 2

you can utilize a Stack widget and modify your code, I wrapped your existing code with a Stack widget to overlay the cancel icon on top of other content. Then, I added a Container inside the InkWell to control the alignment and padding.

Stack(
  children: [
    InkWell(
      onTap: () {
        Navigator.pop(context);
      },
      child: Container(
        alignment: Alignment.topRight,
        padding: EdgeInsets.all(10),
        child: CircleAvatar(
          maxRadius: 20,
          backgroundColor: Colors.transparent,
          child: Image.asset(
            'assets/cancel.png',
            height: 30,
          ),
        ),
      ),
    ),
    // write your rest code here
  ],
)

Answer 3

Not sure what is your parent widget? I saw your screenshot looks like using show dialog.

Let's say if you are using Alertdialog, you can easily achieve the layout using stack + positioned to make your cancel image to the position you want. below:

showDialog(
                      context: context,
                      builder: (context) {
                        return AlertDialog(
                            title: Stack(
                              clipBehavior: Clip.none,
                              children: [
                                Text("Title"),
                                Positioned(
                                    top: -20,
                                    right: -20,
                                    child: InkWell(
                                      onTap: () {
                                        Navigator.pop(context);
                                      },
                                      child: Align(
                                        alignment: Alignment(1, -1),
                                        child: CircleAvatar(
                                            maxRadius: 20,
                                            backgroundColor: Colors.transparent,
                                            child:
                                                Icon(Icons.cancel, size: 30)),
                                      ),
                                    ))
                              ],
                            ),
                            content: Container(
                              height: 200,
                              width: 500,
                              child: Text("Some data"),
                            ));
                      });

example here