Odtnhj

I have a card widget which wraps a container widget with a max width given to it, this is what it looks like :

this is the code below:

Card(
 child: Container(
 constraints: new BoxConstraints(
 maxWidth: 250.0,
 ),
 margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
 child: Row(
 mainAxisAlignment: MainAxisAlignment.start,
 mainAxisSize: MainAxisSize.min,
 crossAxisAlignment: CrossAxisAlignment.start,
 children: <Widget>[

 new Flexible(
 child: new Column(
 crossAxisAlignment: CrossAxisAlignment.start,
 children: <Widget>[

 new Container(
 margin: const EdgeInsets.only(top: 5.0),
 child: new Text(messageSnapshot.inbox),
 ),




 ],
 ),
 ),
 ],
 ),
 ))

problem arises when i try to create another text widget under it, that i specifically want to move to the extreme right below the first text, this is what i get:

The 2nd text widget i added expands, goes to the extreme end as i wanted , but also expands the card to the max-width, i set. This is the code for it:

Card(
 child: Container(
 constraints: new BoxConstraints(
 maxWidth: 250.0,
 ),
 margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
 child: Row(
 mainAxisAlignment: MainAxisAlignment.start,
 mainAxisSize: MainAxisSize.min,
 crossAxisAlignment: CrossAxisAlignment.start,
 children: <Widget>[

 new Flexible(
 child: new Column(
 crossAxisAlignment: CrossAxisAlignment.start,
 children: <Widget>[

 new Container(
 margin: const EdgeInsets.only(top: 5.0),
 child: new Text(messageSnapshot.inbox),
 ),


 Row(
 mainAxisAlignment: MainAxisAlignment.end,
 children: <Widget>[
 Text("3:18am")
 ],
 )

 ],
 ),
 ),
 ],
 ),
 ))

But this is what i want

where the date is is horizontally at the end of the container space the initial text created without it being expanded.

How do i solve this issue ?

Wrap the elements inside the Flexible widget inside a IntrinsicWidth widget. This will make all children in the Column have the same width. Then, inside the Row for the second element add a MainAxisSize.max property, so it will mimic the first element width and obey the MainAxisAlign.end property the way you want to.

new Flexible(
 child: new IntrinsicWidth(
 child: new Column(
 crossAxisAlignment: CrossAxisAlignment.start,
 children: <Widget>[
 new Container(
 margin: const EdgeInsets.only(top: 5.0),
 child: new Text(
 messageSnapshot.inbox,
 ),
 ),
 Row(
 mainAxisAlignment: MainAxisAlignment.end,
 mainAxisSize: MainAxisSize.max,
 children: <Widget>[
 Text(
 "3:18am",
 ),
 ],
 )
 ],
 ),
 ),
 ),