CODEWITHSUNDEEP
dartflutterflutter-layout
Pedro Massango
Pedro Massango

Reputation: 5005

Positioning a Widget in the end of the Row widget

I'm just stuck here. I've tried everything but nothing works for me. All I want is to position the Icon on the right of my Row.

Note: I've tried setting all widget inside the row into a Align Widget and handle the position of that Align widget, but nothing worked. The code below is retrieving this:

enter image description here

This arrow, should go to the end of the Row widget. Here is my Code:

Row(
    mainAxisAlignment: MainAxisAlignment.start, //change here don't //worked
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Container(
        margin:
            EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0, right: 12.0),
        width: 15.0,
        height: 15.0,
        decoration: BoxDecoration(
            color: task.color, borderRadius: BorderRadius.circular(40.0)),
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            task.title,
            style: TextStyle(
                color: Colors.black,
                fontSize: 19.0,
                fontWeight: FontWeight.bold),
          ),
          Text(
            'Duration: ${task.date}',
            style: TextStyle(color: Colors.black, fontSize: 14.0),
          )
        ],
      ),
      Icon(Icons.navigate_next, color: Colors.black) // This Icon
    ],
  ),

Upvotes: 40

Views: 41499

Answers (4)

user1462442
user1462442

Reputation: 8202

One solution is to use the Spacer widget to fill up the space:

    Row(
            mainAxisAlignment: MainAxisAlignment.start, //change here don't //worked
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                margin:
                    EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0, right: 12.0),
                width: 15.0,
                height: 15.0,
                decoration: BoxDecoration(
                    color: Colors.red, borderRadius: BorderRadius.circular(40.0)),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "task.title",
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 19.0,
                        fontWeight: FontWeight.bold),
                  ),
                  Text(
                    'Duration: ${somenum}',
                    style: TextStyle(color: Colors.black, fontSize: 14.0),
                  )
                ],
              ),
              new Spacer(), // I just added one line
              Icon(Icons.navigate_next, color: Colors.black) // This Icon
            ],
          ),

enter image description here

Here is what happens if you add it to the beginning of the Row.

enter image description here

Upvotes: 81

CopsOnRoad
CopsOnRoad

Reputation: 267404

Solutions:

  1. Use Spacer:

    Row(
  children: <Widget>[
    Text('1'),
    Spacer(), // <-- Use 'Spacer'
    Text('2'),
  ],
)

  2. Use mainAxisAlignment:

    Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // <-- spaceBetween
  children: <Widget>[
    Text('1'),
    Text('2'),
  ],
)

Output (same for both):

enter image description here

Upvotes: 12

Daibaku
Daibaku

Reputation: 12566

Why don’t you use ListTile widget? Or wrapping Column with Expanded? I think that would be working.

Upvotes: 3

Naimish Vinchhi
Naimish Vinchhi

Reputation: 803

you can add Spacer(), above the widget you want to put at the end.

Upvotes: 10

Related Questions