Flutter LinearLayout weight alternative

Question

I'm Android developer learning flutter. I want my screen looks like this:

|---------------------------------| |                                 | |  Babe               I miss you  | |                                 | |---------------------------------| 

"Babe" and "I miss you" should be two separate elements.

With Android xml I would solve this with LinearLayout and two TextViews with weight=1 for each. What's the alternative for flutter?

P.S. I know that you can solve it with FrameLayout or with RelativeLayout but I want closest to LinearLayout behavior.

Answer 1

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!

Answer 2

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