Flutter Flexible does not take entire space - flutter

Question

I have this chat item similar to what you see on WhatsApp.
This is what I have so far.
ListView(
physics: BouncingScrollPhysics(),
children: [
Dismissible(
key: Key(""),
background: Container(color: Colors.grey[200]),
direction: DismissDirection.endToStart,
child: InkWell(
highlightColor: Colors.transparent,
onTap: () {},
child: Column(
children: [
Container(
child: Padding(
padding: EdgeInsets.all(16),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 12, 0),
child: CircleAvatar(
backgroundColor: Colors.blue,
radius: 30,
),
),
],
),
),
Flexible(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 4),
child: Text(
"John Doe",
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
),
),
),
Text(
"Lorem ipsum, or something idk about this",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.grey[800]
),
),
],
),
),
Flexible(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Padding(
// padding: EdgeInsets.fromLTRB(0, 0, 0, 4),
// child: Text(
// "John Doe",
// maxLines: 1,
// overflow: TextOverflow.ellipsis,
// style: TextStyle(
// fontSize: 16,
// ),
// ),
// ),
Container(
alignment: Alignment.topRight,
child: Text(
"12:02",
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.right,
style: TextStyle(
color: Colors.grey[800],
fontSize: 12,
),
),
),
],
),
),
],
),
padding: const EdgeInsets.all(0.0),
alignment: Alignment.center,
),
),
),
Divider(
color: Colors.grey[300],
height: 1,
indent: 90,
),
],
),
),
),
],
),
The list view is part of the body of a scaffold.
Currently only the middle part of this is the issue. And by issue I mean it is not flexing all the way. The right hand side where it says 12:02 should only expand if it has to otherwise minimum size should be applied. I am extremely lost.
Thanks for any help!
I have added this image to show what it looks like so far.

Answer 1

Try Expanded Widget
ListView(
physics: BouncingScrollPhysics(),
children: [
Dismissible(
key: Key(""),
background: Container(color: Colors.grey[200]),
direction: DismissDirection.endToStart,
child: InkWell(
highlightColor: Colors.transparent,
onTap: () {},
child: Column(
children: [
Container(
child: Padding(
padding: EdgeInsets.all(16),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 12, 0),
child: CircleAvatar(
backgroundColor: Colors.blue,
radius: 30,
),
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 4),
child: Text(
"John Doe",
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
),
),
),
Text(
"Lorem ipsum, or something idk about this",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.grey[800]),
),
],
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
// Padding(
// padding: EdgeInsets.fromLTRB(0, 0, 0, 4),
// child: Text(
// "John Doe",
// maxLines: 1,
// overflow: TextOverflow.ellipsis,
// style: TextStyle(
// fontSize: 16,
// ),
// ),
// ),
Container(
alignment: Alignment.topRight,
child: Text(
"12:02",
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.right,
style: TextStyle(
color: Colors.grey[800],
fontSize: 12,
),
),
),
],
),
),
),
],
),
padding: const EdgeInsets.all(0.0),
),
),
),
Divider(
color: Colors.grey[300],
height: 1,
indent: 90,
),
],
),
),
),
],
),

Answer 2

Seems like there really isn't a good none hacky solution. It seems to work quite well with positions and a stack.
Here is the code.
Dismissible(
key: Key(""),
background: Container(color: Colors.grey[200]),
direction: DismissDirection.endToStart,
child: InkWell(
highlightColor: Colors.transparent,
onTap: () {},
child: Column(
children: [
Container(
child: Padding(
padding: EdgeInsets.fromLTRB(16, 16, 16, 12),
child: Container(
child: Stack(
children: [
Positioned(
top: 0,
right: 0,
child: Text(
"Mon",
style: TextStyle(
fontSize: 14,
color: Colors.grey[600]
),
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(100))
),
child: Padding(
padding: EdgeInsets.fromLTRB(8, 4, 8, 4),
child: Text(
"123",
style: TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 12, 0),
child: CircleAvatar(
backgroundColor: Colors.blue,
radius: 30,
),
),
],
),
),
Flexible(
flex: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 4),
child: Text(
"John Doe",
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
),
),
),
Text(
"Lorem ipsumahskhdk ashkda ",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.grey[800]),
),
],
),
),
SizedBox(
width: 60,
),
],
)
],
),
),
),
),
Divider(
color: Colors.grey[300],
height: 1,
indent: 90,
),
],
),
),
),