Container(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundColor: Color(0xFFF5F5F5),
radius: 16.0,
),
SizedBox(width: 24.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Text large enough to overflow',
style: TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: Color(0xFF212121),
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.fade,
maxLines: 1,
),
SizedBox(height: 8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Bill',
style: TextStyle(
fontSize: 12.0,
fontFamily: 'Roboto',
color: Color(0xFF9E9E9E),
),
),
Text(
'\$ -999.999.999,95',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'Roboto',
color: Color(0xFF212121),
),
),
],
),
SizedBox(height: 4.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Limit',
style: TextStyle(
fontSize: 12.0,
fontFamily: 'Roboto',
color: Color(0xFF9E9E9E),
),
),
Text(
'R\$ 900.000.000,95',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'Roboto',
color: Color(0xFF9E9E9E),
),
),
],
),
],
),
),
],
),
);
In this solution, we use an Expanded widget to make the text take up as much space as possible. We set the overflow property of the Text widget to TextOverflow.fade to make the text fade out when it overflows. We also set the maxLines property to 1 to ensure that the text only takes up one line. We use SizedBox widgets with a specified height to create some space between the different elements. Finally, we use the mainAxisAlignment property of the Row widget to ensure that the different elements are aligned correctly.