Get LayoutBuilder height in flutter

Question

I'm having a Row that contain an Expand(LayoutBuilder(Widget that can change vertical size by the user))) and Column on the right like the code. I want the height of column is equal to the height (vertical length) of the left widget. The column heigh should also able to change according to the height of the left widget.

Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: Row(children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.grey,
              child: LayoutBuilder(builder: (context, size) {
                return TextField(
                  maxLines: null,
                );
              }),
            ),
          ),
          Container(
            color: Colors.red,
            child: Column(
              children: <Widget>[
                InkWell(
                  child: Icon(Icons.keyboard_arrow_up),
                  onTap: () {},
                ),
                InkWell(
                  child: Icon(Icons.keyboard_arrow_down),
                  onTap: () {},
                ),
              ],
            ),
          )
        ]),
      ),
    );

To look similar to this. My first solution is somehow get the LayoutBuilder height and use it for the container of the column. Any other better way to make it the same look and behavior as describe is fine.

Answer 1

You could put the Row inside the LayoutBuilder, like this:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("")),
    body: Container(
      child: LayoutBuilder(builder: (context, size) {
        return Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Flexible(
              child: Container(
                color: Colors.grey,
                child: TextField(
                  maxLines: null,
                ),
              ),
            ),
            Container(
              color: Colors.red,
              child: Column(
                children: <Widget>[
                  InkWell(
                    child: Icon(Icons.keyboard_arrow_up),
                    onTap: () {},
                  ),
                  InkWell(
                    child: Icon(Icons.keyboard_arrow_down),
                    onTap: () {},
                  ),
                ],
              ),
            )
          ],
        );
      }),
    ),
  );
}

Edit: This would make the height of the Row take the height of it's parent.

If you want the height of the Row to be the minimum height, in this case you could wrap the Row with an IntrinsicHeight, take care that the use of IntrinsicHeight could be expensive so don't use it every time if you can restructure your widgets to avoid it.