flutterpopupflutter-dependenciesforcecloseflutter-positioned

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


Solution

  • 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.