Flutter – How to get constraints like Height and Width of container in flutter

dartflutter

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:

Short Vertical Line

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:

new Container(
    margin: const EdgeInsets.symmetric(vertical: 10.0),
    decoration: new BoxDecoration(
      border: new Border(
        right: new BorderSide(
          width: 2.0,
          color: Colors.amber,
        ),
      ),
    ),
    child: new Text('Hello World!'),
);
Related Topic