Flutter text layout - flutter

Question

I want to position my time text on top or bottom on the left side of the bubble chat like Line app messanger.
Here is what I have:
Currently it is positioned on the center on the left side of the bubble.
This is what I want:
And this is my code:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(sendStatus,
style: TextStyle(
fontSize: 11
),),
Text(date,
style: TextStyle(
fontSize: 11
),)
],
),
Container(
child: Align(
alignment: Alignment.topRight,
child : Column(
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
child: Align(
alignment: Alignment.topRight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 12,vertical: 12,),
margin: EdgeInsets.symmetric(horizontal: 10,vertical: 2),
decoration: BoxDecoration(
color: Color(0xFF2381d0),
borderRadius: BorderRadius.circular(5),
),
child: Container(
constraints: BoxConstraints(maxWidth: 250),
child: Text(
message,
style: TextStyle(fontSize: 16,color: Colors.white),
textAlign: TextAlign.left,
maxLines: 100,
overflow: TextOverflow.ellipsis,
),
),
),
SizedBox(width: 5,),
],
),
),
),
...
],
),
],
),
),
),
],
);
Is there any solution?

Answer 1

Check the example below I have made some changes taking your example:
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"Brian Miller",
style: TextStyle(fontSize: 11),
),
Text(
"14/11/2021",
style: TextStyle(fontSize: 11),
)
],
),
),
Align(
alignment: Alignment.topRight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(
horizontal: 12,
vertical: 12,
),
margin: EdgeInsets.symmetric(
horizontal: 10, vertical: 2),
decoration: BoxDecoration(
color: Color(0xFF2381d0),
borderRadius: BorderRadius.circular(5),
),
child: Container(
constraints: BoxConstraints(maxWidth: 250),
child: Text(
"This is the message for the recasdflasndfjansdkfkadf sadfaw eroisad faoisdf weorieiving end person",
style: TextStyle(
fontSize: 16, color: Colors.white),
textAlign: TextAlign.left,
maxLines: 100,
overflow: TextOverflow.ellipsis,
),
),
),
SizedBox(
width: 5,
),
],
),
),
],
),
],
),
],
)
]),
),
),
);
}
}
This has the functionality for making the time on bottom of the left card.