Reputation: 536
As the picture shows:
There is a solid line between the two Text(Pokémon, 11.25 AM). What I want is the length of the line equaling to the longest Text length. But the line behaved like match_parent.
In Android Native we can use a vertical LinearLayout, and set android:layout_width="wrap_content" limit in horizontal.
In Flutter we can only set Column mainAxisSize: MainAxisSize.min limit in vertical.
I guess the problem is due to Divider. When Divider is gone, the Column's width is wrap_content.
Experiment is as follows:
Container(
color: Colors.red,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
padding: EdgeInsets.all(4.0),
child: Text(
'Pokémon',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Divider(
height: 2.0,
color: Colors.white,
),
Container(
margin: EdgeInsets.only(top: 8.0),
child: Text(
'11.25 AM',
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
Upvotes: 2
Views: 407
Reputation: 51246
You can use - IntrinsicWidth
widget. Wrap Column with it.
Container(
color: Colors.red,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: IntrinsicWidth(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
padding: EdgeInsets.all(4.0),
child: Text(
'Pokémon',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Divider(
height: 2.0,
color: Colors.white,
),
Container(
margin: EdgeInsets.only(top: 8.0),
child: Text(
'11.25 AM',
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
Upvotes: 1