Positioning a Widget in the end of the Row widget

Question

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:

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     ],   ), 

Answer 1

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

https://docs.flutter.io/flutter/widgets/Spacer-class.html

    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             ],           ), 

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