How to position an Icon/Button at the Top Right corner of a Container in FLUTTER?

Issue

So this is my current home-screen and I’m trying to position the close button on the top-right corner of each container, which will end up deleting these chatrooms and I’m having some trouble figuring out how to do that. Below the image is my code.

enter image description here

child: Container(
    decoration: BoxDecoration(
        color: Color(0xff240046),
      borderRadius: BorderRadius.circular(15)
    ),
    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 18),
    margin: EdgeInsets.symmetric(vertical: 8),
    child: Row(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(30),
          child: profilePicUrl.isNotEmpty ? Image.network(
            profilePicUrl,
            height: 40,
            width: 40,
          ) : null,
        ),
        SizedBox(width: 12),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              name,
              style: TextStyle(
                  color: Color(0xff7b2cbf),
                  fontSize: 16),
            ),
            SizedBox(height: 3),
            Text(widget.lastMessage,
            style: TextStyle(
              color: Color(0xffd4d4d4),
            ),)
          ],
        ),
        Column(
          children: [
            Align(
              alignment: Alignment.topRight,
              child: Icon(
                  Icons.close,

              ),
            )
          ],
        ),

      ],
    ),
  ),

So.. how do I do it? Thanks in advance.

Solution

first of all the approach you are using is not readable, any ways to do it on top right, set mainAxisAlignment to MainAxisAlignment.start, then set crossAxisAlignment to CrossAxisAlignment.end. it looks like this:-

  Column(
      mainAxisAlignement : MainAxisAlignment.start,
      crossAxisAlignement : CrossAxisAlignment.end,
      children: [
        Align(
          alignment: Alignment.topRight,
          child: Icon(
              Icons.close,

          ),
        )
      ],
    ),

now theres a best way to achieve this, its ListTile. it has leading property for left side, and title and subtitle, and then for right side widgets it has trailing property.

it looks like this:-

ListTile(
        leading:  ClipRRect(
      borderRadius: BorderRadius.circular(30),
      child: profilePicUrl.isNotEmpty ? Image.network(
        profilePicUrl,
        height: 40,
        width: 40,
      ) : null,
    ),
    title:   Text(
          'name',
          style: TextStyle(
              color: Color(0xff7b2cbf),
              fontSize: 16),
        ),
    subtitle:Text('(widget.lastMessage)',
    style: TextStyle(
          color: Color(0xffd4d4d4),
        ), ),
     trailing: Icon(
              Icons.close,

          ),
        ),

Answered By – umar_baloch

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published