Message chat bubble with details - flutter

Question

So, I'm new in the Flutter scene and I'm having some trouble finishing a message bubble for a chat practice app. It's working ok, like this:
https://i.ibb.co/1qstjqR/now.jpg
The code that generates the bubble is like this:
Widget bubble(){
return Padding(
padding: padding(),
child: Row(
mainAxisAlignment:
mine ? MainAxisAlignment.end : MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: 30),
Flexible(
child: Row(
mainAxisAlignment:
mine ? MainAxisAlignment.end : MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//BUBBLE TAIL
mine
? Container()
: Transform(
alignment: Alignment.center,
transform: Matrix4.rotationY(math.pi),
child: CustomPaint(
painter: CustomShape(colorChat),
),
),
Flexible(
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: colorChat,
borderRadius: border(),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
//MESSAGE STR CONTENT
Text(
messageStr,
textAlign: TextAlign.justify,
style: TextStyle(fontSize: 16),
),
//TIMESTAMP (AND DETAIL IN FUTURE)
Padding(
padding: const EdgeInsets.only(top: 5),
child: Text(
dateTimeStr,
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
],
),
),
),
//BUBBLE TAIL
mine ? CustomPaint(painter: CustomShape(colorChat)) : Container(),
],
)),
],
),
);
The problem is: I'm trying to put a string containing more detail about de message (like the extension and size of a file) in the same row of the datetime, to the far left.
The closest I've managed to do is the code below:
Padding(
padding: const EdgeInsets.only(top: 5),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"some detail",
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Text(
dataMsg,
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
],
),
)
But that makes the bubble being always big:
https://i.ibb.co/JjYx0vY/detail-bad.jpg
That's because of the Expanded. But without it the first Align widget don't work and stay to the far right.
How I'd like it to be:
https://i.ibb.co/gt633Gc/detail-ok.jpg
Thanks!

Answer 1

Remove the Expanded and Align widgets. And add property mainAxisAlignment: MainAxisAlignment.end to the Row widget.
Padding(
padding: const EdgeInsets.only(top: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"some detail",
style: TextStyle(color: Colors.white, fontSize: 10),
),
Align(
alignment: Alignment.centerRight,
child: Text(
"hello",
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
],
),
)