Reputation: 5757
Note the fixed width width: 220.0,
.
ListView(
children: <Widget>[
Padding(padding: EdgeInsets.only(top:0.0),),
InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
CircleAvatar(
radius: 28.0,
child: Text('1')
),
Container(
height: 40.0,
width: 220.0, // Must to have, otherwise, it overflows the Text 'AAAAAAAA' container on the right.
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(child: Text('This is very very very very very'
' very very very long',
style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis),
),
Expanded(child: Text('This is very very very very very'
' very very very long',
style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis),
)
],
),
),
],
),
Container(
height: 40.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('AAAAAAAA', style: TextStyle(fontSize: 13.0)),
],
)
),
],
)
),
),
]
)
ListView(
children: <Widget>[
Padding(padding: EdgeInsets.only(top:0.0),),
InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
radius: 28.0,
child: Text('1')
),
Expanded(
child: Container(
height: 40.0,
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('This is very very very very very'
' very very very long',
style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis),
Text('This is very very very very very'
' very very very long',
style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis)
],
),
),
),
Container(
height: 40.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('AAAAAAAA', style: TextStyle(fontSize: 13.0)),
],
)
),
],
)
),
),
]
)
Upvotes: 0
Views: 448
Reputation: 3449
If you don't give a width
for Container
then it will automatically fill any space available:
Container(
height: 40.0,
child: Column(
children: <Widget>[
Expanded(
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
overflow: TextOverflow.ellipsis,
)),
Expanded(
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
overflow: TextOverflow.ellipsis,
)),
],
))
If you want to give a width then it's advised to use something like MediaQuery to make sure the value is uniform across screen sizes for example:
Container(
height: 40.0,
width: MediaQuery.of(context).size.width / 2,
child: ...
Just make sure everything is wrapped up in a MaterialApp
or WidgetsApp
for MediaQuery
to work:
Upvotes: 1