Center row child and right-align
You can create this with Stack
Card(child: Padding(
padding: const EdgeInsets.all(16.0),
child: Stack(
children: <Widget>[
Center(child: Text('PLAY QUEUE'),),
Container(
alignment: Alignment.centerRight,
child: Text('CLEAR'),
)
],
),
),
),
This is a job for a Stack!
You can put the Text widgets into the Stack as individual children and use a Positioned widget to right-align the "clear" one.
This is what the Material AppBar widget does for this exact scenario.
To place the Container
at right side inside the Row, I have used Expanded!
Once I have to place a child Container
inside Row
, and here Row
have already some other children widgets before that Container
starting from default direction left to right side and the Container
were exactly trailing after earlier childrens.
and here my Container
width was 40.0 and remaining width inside the Row
were around 100.0 after leading childrens.
thus, I used below said to push the Container
right side to the Row
.
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 8.0, right: 8.0),
child: CircleAvatar(
child: ClipOval(
child: _musicIcon,
clipBehavior: Clip.antiAlias,
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 8.0, bottom: 3.0),
constraints: BoxConstraints(maxWidth: 280.0),
child: Text("some0"),
),
Row(
children: <Widget>[
Container(
constraints: BoxConstraints(maxWidth: 200.0),
child: Text("some1"),
),
Container(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Text("some2"),
),
Container(
constraints: BoxConstraints(minWidth: 20.0),
child: Text("some3"),
),
],
),
],
),
Expanded(
child: Container(
width: 40.0,
margin: EdgeInsets.only(right: 8.0),
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: () {
// doing something
},
child: Padding(
padding: EdgeInsets.only(left: 18.0, right: 0.0),
child: CircleAvatar(
child: _getActionFlareActor(
_musicURL, _musicTitle, true),
),
),
)),
)
],
)),
Hope this scenario may help someone.