In flutter, how can I arrange widgets at the top and bottom of the window?

January 1, 2024

I have three widgets and I would like the top widget to be at the very top and the bottom widget to be at the very bottom. The middle widget can be either equally spaced or just under the top widget (preferably the latter).

=================
top widget

<some space>

middle widget

<some (or more) space>

bottom widget
=================

I guess I could probably use a LayoutWidget to calculate how much space I need, use MainAxisAlignment.Start and insert a spacer widget between the middle and bottom widgets, but I’m hoping there’s a more natural way to do this.

I tried putting them in a column with mainAxisAlignment: MainAxisAlignment.spaceEvenly,

      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          BoardWidget(board: widget.board),
          TipWidget(board: widget.board),
          OnScreenKeyboard(onKeyPressed: _onKeyPress),
        ],
      ),

but that adds space at the top and bottom as well as between the widgets.

Based on flutter – how to align at the top and at the bottom (this is the issue) – and column middle part, I tried to add an Expanded, like this:

      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          BoardWidget(board: widget.board),
          TipWidget(board: widget.board),
          Expanded(
            child: Align(
                alignment: Alignment.bottomCenter,
                child: OnScreenKeyboard(onKeyPressed: _onKeyPress)),
          ),
        ],
      ),

but that didn’t seem to have any affect (I’m not sure I entirely understood that terse answer, tbh).

>Solution :

you can achieve this through:

put mainAxisAlignment = MainAxisAlignment.spaceBetween, (to divide the remaining space among the widgets of the column but not before or after them).
you can use Spacer Widget between widgets, and provide a flex value for each spacer to allocate a specific percent of the remaining space. (recommended for your goal). check spacer