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!
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,
),
],
),
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')
]
)
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')
)
)
new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget> [
new Text('Babe', style: AppStyle.AppBarTextStyle,),
new Text('I miss you',style: AppStyle.AppBarTextStyle,)
]
)
)