Expand Container to fill remaining space in Column

user_11775891 0
Viewed 1370

I have a problem with building a specific layout in flutter.

What I need is: Scrollable screen, with two columns, where the first col is of certian (but dynamic) height. And the second col has part of certain (but dynamic) height and the rest of the col I want to fill remaining space.

The code structure.

   Row(
      children: [
       Expanded(
         child: Column(children:[
            someDynamicHeightWidgetsHere()])),
       Expanded(child: Column(children: [
            someWidgetsHere(), 
            here fill remainind space to match the first column]))
       ]  
    )
dart flutter
1 Answers

Use IntrinsicHeight, This widget only expands to its child height. This class is useful, for example, when unlimited height is available and you would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable height.

Example:

IntrinsicHeight(
        child: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  Container(
                    height: 800,
                    color: Colors.blue,
                  ),
                ],
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  Container(
                    height: 400,
                    color: Colors.red,
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.yellow,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),

Output:

enter image description here

user_51065740
Related