CODEWITHSUNDEEP
dartflutter
Bobola
Bobola

Reputation: 1045

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

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.

Upvotes: 4

Views: 14365

Answers (2)

Iiro Krankka
Iiro Krankka

Reputation: 5239

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!'),
);

Upvotes: 7

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277527

LayoutBuilder is what you want.

The builder delegate receives a BoxConstraint as parameter, corresponding to the container's size.

Upvotes: 10

Related Questions