Flutter LinearLayout weight alternative

Flutter's Row widget is equivalent to android's LinearLayout with android:orientation="horizontal", and Column widget is equivalent to android's LinearLayout with android:orientation="vertical".

flex property of Flexible widget is equivalent weight property, you can wrap the Text widgets in a Flexible widget and specify the flex property.

Example:

new Row(
    children: <Widget>[
      new Flexible(child: new Text("Babe"), flex: 1,),
      new Flexible(child: new Text("I miss you"), flex: 1,)
    ],
  )

Hope that helps!


Considering the layout in the question you want to display both the texts at the end of screen one at the beginning other at the end you can simply add MainAxisAlignment.spaceBetween property to the row

so you need to modify your code to

child: new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
     new Text('Babe'),
     new Text('I miss you')
     ]
  )

![enter image description here I dont understand why first answer was accepted because it simply adds both the text to right most end of the screen,

Tip: Incase you need some padding around each text wrap each of the text in a Container and add desired padding and margin


You can use row with MainAxisAlignment which will allow you to place elements as per your expectation

Widget textSection = new Container(
  child: new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
     new Text('Babe'),
     new Text('I miss you')
  )
)

Using an Expanded widget can also produce a LinearLayout effect like so:

Row(
  children: <Widget>[
    Expanded(
      child: Container(child: Text("Babe")),
      flex: 2,
    ),
    Expanded(
      child: Container(child: Text("I don't miss you"),alignment: Alignment.centerRight),
      flex: 2,
    ),
   ],
  ),
     

Tags:

Layout

Flutter