How to align an element in a flexible row in flutter? - flutter

Question

I have a chat bubble with username, timestamp and chat message. It is divided into two rows.
First row is username and timestamp, second row is the chat message.
With the code below it looks like this:
I want the timestamp to be aligned right but the blue box should not be wider then the message line except the message is shorter than username and timestamp.
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Username"),
Container(
color: Colors.red,
child: Text("5 mins ago"),
),
],
),
Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width - 120),
child: Text("A long message text 123456789")),
],
))
]);
}
}

Answer 1

Try this:
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("Username"),
Spacer(),
Container(
color: Colors.red,
child: Text("5 mins ago"),
),
],
),

Answer 2

This will solve your problem.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Username"),
Container(
color: Colors.red,
child: Text("5 mins ago"),
),
],
),
Text("A long message text 123456789"),
],
),
)
],
);
}
}