I have a layout in my application which comprises of some text and a timestamp. I'm looking to have the timestamp (clock icon in the picture) be at the bottom left corner of the expanded widget, while the text ("what" string in the picture) should start from the top right.
Representation:
|text| |
| ----------- |
| empty space |
| ----------- |
| |time|
Currently, what I managed below have them aligned to the extreme left and right, but they seem to be constrained by the Column widget and as such, are aligned to the centre of the widget. And I cannot seem to get expanded to work within another Expanded.
Widget code:
return new Container(
child: new Row(
children: <Widget>[
new Column(
children: <Widget>[
new MaterialButton(
minWidth: 60.0,
child: new Icon(Icons.keyboard_arrow_up),
onPressed: () => null,
),
new Container(
padding: new EdgeInsets.all(5.0),
child: new Text("1231"),
),
new MaterialButton(
minWidth: 60.0,
child: new Icon(Icons.keyboard_arrow_down),
onPressed: () => null,
),
],
),
new Expanded(
// child: new Container(
// padding: EdgeInsets.all(10.0),
child: new Column(
// mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Align(
alignment: Alignment.topLeft,
child: new Text("what"),
),
// "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."),
new Align(
// padding: new EdgeInsets.all(10.0),
alignment: Alignment.bottomRight,
child: new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Container(
padding: new EdgeInsets.all(2.0),
child: new Icon(
Icons.access_time,
size: 12.0,
),
),
new Container(
padding: new EdgeInsets.all(2.0),
child: new Text("1 hr"),
),
],
),
),
],
),
// ),
),
new Column(
children: <Widget>[
new MaterialButton(
minWidth: 60.0,
child: new Icon(Icons.save, size: 20.0),
onPressed: () => null,
),
new Container(
padding: new EdgeInsets.all(5.0),
child: new Text("8"),
),
new MaterialButton(
minWidth: 60.0,
child: new Icon(Icons.comment, size: 20.0),
onPressed: () => null,
),
],
),
],
),
);
}
Wrap the widget you wish to align with the Align widget and set its alignment property. For example, this would align a text widget to the middle right of the parent. Notice in the image that the alignment (x,y) doesn't need to be within the range [-1, +1] .
try using alignment: Alignment.bottomRight as a named parameter of Container class
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With