skip to Main Content

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).

Update:
Here’s where I ended up thanks to answer below. Might still tune it as suggested, but it gets me exactly what I was trying to do:

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

2

Answers


  1. Your first Column is close, just use MainAxisAlignment.spaceBetween.

    Login or Signup to reply.
  2. you can achieve this through:

    1. put mainAxisAlignment = MainAxisAlignment.spaceBetween, (to divide the remaining space among the widgets of the column but not before or after them).

    2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search