I am trying to build something similar to a chat bubble, where each chat bubble would have text aligned normally, and timestamp aligned to the bottom right of the bubble. The size of the bubble must expand with the text, and should not take more space than necessary.
In order to do this I used a Column with two Container children. The second child would be having the timestamp.
When I do this without adding "alignment" property to the second Container child, the bubble size correctly shrinks/expands to the text, like so:
But when I add alignment: Alignment.bottomRight
to the second container, the bubble size expands to fill the entire width of the screen.
Is there a way to align the "7:30 PM" text to the bottom right of the bubble without expanding the bubble size?
Scaffold(
body: Container(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Text(
"Without Alignment",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
),
Container(
// alignment: Alignment.bottomRight,
decoration: BoxDecoration(
border: Border.all(),
),
child: Text(
"7:30 PM",
textDirection: TextDirection.rtl,
textAlign: TextAlign.right,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
),
],
),
),
),