Question 195754 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How can i place cancel icon on top right corner

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

enter image description here

I want like this

enter image description here

Tags:

3

Answers


  1. 0

    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
  ],
)
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search