How can I layout widgets based on the size of the parent?

Question

Let\'s say you have a parent widget that might have a variable size.

For example:

var container = new Container(
   height: 200.0, // Imagine this migh         


        

Answer 1

So I had an interesting situation where my parent child was increasing size dynamically based on the content (Text containing description). This parent widget was displaying content in read only mode but this solution might resolve other problems as well where you increase textfield height dynamically.

I had a height variable and GlobalKey. In initState of widget I am using SchedulerBinding which runs it's addPostFrameCallback after layout is build.

The globalKey is assigned to any parent widget whose height we need for it's children.

double height = 0.0;
GlobalKey _globalKey = GlobalKey();

  @override
  void initState() {
    SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
      height = _globalKey.currentContext.size.height;
      print('the new height is $height');
      setState(() {});
    });
    super.initState();
  }

and rest code looks like this

// this parent having dynamic height based on content 
Container(
  width: 100.0,
  key: _globalKey,
  child: Container(
    width: 100.0,
    child: Row(children: [  ///  you can have column as well or any other widget. 
      Container(child: ...),
      Container(height: height,), ///this widget will take height from parent 
    ],),
  )
)