Question 319206 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Column forces its children's height to be max and I cant center a widget vertically because of that. How do i change it?

I have a column in which there is textField in the bottom and a Expanded widget taking up the rest of the vertical space above. I want to center a widget inside this expanded that has its own size determined by that widgets children. Now when I try to run this by putting it inside a Center widget, it only centers it horizontally and makes it take up all the vertical space in the expanded. How do I solve this?

Column(
  children: [
    Expanded(
        child: SizedBox(
          width: double.maxFinite,
          height: double.maxFinite,
          child: Center(
              child: TaskWidget(),
          ),
        )
    ),
    SizedBox( /* The text field */)
  ],
),

It seemed that every child of the column was inheriting something that forced the children take up all vertical space and it only centered when I added a column and other expanded widgets to take up that extra vertical space so that it can finally center itself.

Column(
  children: [
    Expanded(
        child: SizedBox(
          width: double.maxFinite,
          height: double.maxFinite,
          child: Column(
            children: [
              Expanded(child: Container()),
              TaskWidget(),
              Expanded(child: Container())
            ],
          ),
        )
    ),
    SizedBox( /* The text field */)
  ],
),

but I feel like this is a very incomplete solution. How can I do something that the column doesnt force the children to take up all vertical space? is there some widget I can use that doesnt pass down this to its children?
thanks everyone in advance!

Tags:

2

Answers


  1. 0

    The mainAxisSize property of a Column defaults to MainAxisSize.max, set it to MainAxisSize.min.

    Column(
  mainAxisSize: MainAxisSize.min,
  // ...
)
    Login or Signup to reply.
  2. 0

    You don’t need the SizedBox for centering:

    Column(
  children: [
    Expanded(
      child: Center(
        child: TaskWidget(),
    )),
    SizedBox(
      child: Text('abc'),
    )
  ],
)

    If above does not work for you somehow, try this:

    Column(
  children: [
    Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          TaskWidget(),
        ],
    )),
    SizedBox(
      child: Text('abc'),
    )
  ],
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search