I'm currently working on a chat app's interface on flutter. I tried to customize the chat message with the following container, to show a vertical line beside each message, like Snapchat does:
child: new Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
alignment: Alignment.centerRight,
width: 300.0,
child: new Text(text),
),
new Container(width: 2.0, height: 10.0, color: Colors.amber, child: null)
],
),
)
Problem is, this:
new Container(width: 2.0, height: 10.0, color: Colors.amber, child: null)
When I specify an explicit height, like the 10.0 above, it doesn't scale with the message, it just stays at the top like this:
So I was wondering if there was a way to scale the height for the line(container) dynamically as the other container for the message Text increases in height.
Best Answer
While the answer by Darky is correct, in your case, you don't need to know the container dimensions. A much simpler way is to just have a border on the right side of your container.
For example: