Expand a widget until it reaches the minHeight of it's parent

user_15983833 0
Viewed 125

I want to expand a container to fill the space until it reaches parent's minHeight. Right now it automatically expands to maxHeight and minHeight is ignored because of it.

My example is below. I want the grey bar that is right below the blue part to be at the bottom of the red part. If I put a Spacer or Expanded after the blue container it expands the whole modal bottom sheet to it's maxSize. I also tried using Align widget on the grey bar but it doesn't change it's position at all.

example of the problem

Code that produces the UI above:

Container(
          color: Colors.red,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Padding(
                padding: ScrPaddings.top8Padding,
                child: HorizontalBarIndicator(
                  width:
                      ScrPaddings(context).screenWidthRelativeTo390(32.0),
                ),
              ),
              Container(
                color: Colors.blue,
                child: ChatListView(
                  conversation: state.conversation,
                  showPendingAnimationBubble: true,
                ),
              ),
              Padding(
                padding: ScrPaddings.bottom8Padding,
                child: HorizontalBarIndicator(
                  width:
                      ScrPaddings(context).screenWidthRelativeTo390(134.0),
                ),
              ),
            ],
          ),
        ),
flutter-layout dart flutter
2 Answers

The container widget automatically expands to take up as much space as possible if a height is not given manually or by its parent. Give the container the same height as the minHeight of the parent.

And if you want to change the height of the modal sheet you can do so with FractionallySizedBox like this:

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      return FractionallySizedBox(
        heightFactor: 0.4,
        child: Container(),
      );
    });

Setting isScrollControlled to true allows the user to make it bigger if need be.

user_143298860

I achieved the desired UI by separating the widgets that should be in the top and the widgets that should be in the bottom in two Column widgets that have mainAxisSize: MainAxisSize.min and adding this parameter to the parent Column - mainAxisAlignment: MainAxisAlignment.spaceBetween.

This separated both child Column widgets without expanding the modal bottom sheet to it's maxSize. It only expanded to minSize and continued expanding after the children within started to increase in size.

The full code that achieved the desired look:

 Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.min,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                SizedBox(
                  height: ScrPaddings(context).screenHeightRelativeTo844(8),
                ),
                HorizontalBarIndicator(
                  width:
                      ScrPaddings(context).screenWidthRelativeTo390(32.0),
                ),
                ChatListView(
                  conversation: state.conversation,
                  showPendingAnimationBubble: true,
                ),
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const CallInformationBar(
                  title: '+49 30 504489445',
                ),
                HorizontalBarIndicator(
                  width:
                      ScrPaddings(context).screenWidthRelativeTo390(134.0),
                ),
                SizedBox(
                  height: ScrPaddings(context).screenHeightRelativeTo844(8),
                ),
              ],
            ),
          ],
        ),
user_159838330
Related