flutterflutter-layoutflutter-positioned

Specific position of icon in Container with BoxDecoration and child: Row


I am trying to move the red block to the right of the Container. I have tried many variations but no matter where I move the code, that "red container" bit, I cannot get it to the position on the top right. I will make it a clickable icon when I get the positioning right.

I did move it into the children Widget with the other Text, adjusted the "crossAxisAlignment to stretch in that row, and mainAxisAlignment to spaceBetween,"

The closest I have is the 2nd image which is the code added below.

What am I missing?

enter image description here

enter image description here

items.add(
        Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
          margin: EdgeInsets.all(5.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10.0),
                    bottomLeft: Radius.circular(10.0)),
                child: Image.asset(object["personImage"],
                  width: 80,height: 80,fit: BoxFit.cover,
                ),
              ),
              Container(
                color: Colors.blue[900],
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(object["personName"]),
                      Text(object["personPlace"]),
                      Text(object["personDate"]),
                      Text(object["personCircle"]),
                    ],
                  ),
                ),
              ),
              Container(
                alignment: Alignment.topRight,
                height: 42.0,
                width: 42.0,
                color: Colors.red,
              )
            ],
          ),
        ),
      );
    },
  );

  return items;

Edit: So two solutions that worked out great. Adding a widget between blue and red containers. Thanks to you both: :)

T.T Sage » Spacer(),

Viren V Varasadiya » Expanded(child: Container()),


Solution

  • You can use a widget called Spacer() for this.

    The Spacer widget takes up space that isn't used by the rest of your widget. Check the code below, it works fine:

    items.add(
            Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(10.0)),
                  boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
              margin: EdgeInsets.all(5.0),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10.0),
                        bottomLeft: Radius.circular(10.0)),
                    child: Image.asset(object["personImage"],
                      width: 80,height: 80,fit: BoxFit.cover,
                    ),
                  ),
                  Container(
                    color: Colors.blue[900],
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(object["personName"]),
                          Text(object["personPlace"]),
                          Text(object["personDate"]),
                          Text(object["personCircle"]),
                        ],
                      ),
                    ),
                  ),
                  // add your spacer widget here
                  Spacer(),
                  Container(
                    alignment: Alignment.topRight,
                    height: 42.0,
                    width: 42.0,
                    color: Colors.red,
                  )
                ],
              ),
            ),
          );
        },
      );
    
      return items;
    

    I hope this answers your question.