title: Flutter - How to fill remaining space in Stepper controls builder?
body: <p>In the screenshot, I want to get the next and back buttons to the bottom of the screen. </p>
  
  <p><a href="https://i.stack.imgur.com/c6Ell.png" rel="noreferrer"><img src="https://i.stack.imgur.com/c6Ell.png" alt="enter image description here"></a></p>
  
  <p>The stepper has a parameter, <code>controlsBuilder</code> that allows you to build out the layout for the controls. If it's just a simple row, It's placed right underneath the content.</p>
  
  <p>Apparently, the Stepper is a flexible wrapper. I'm not sure what that means. I think it means that the Stepper is considered a flex object because it contains a scrollable area (for the content). Having read the <a href="https://flutter.io/docs/development/ui/layout/box-constraints" rel="noreferrer">docs</a>, if I'm understanding correctly, it says that I cannot use an <code>Expanded</code> or a <code>Column</code> with a max size in the mainAxis because the stepper is essentially a scrollable area, meaning any RenderBox inside it has unbounded constraints. </p>
  
  <p><strong>So, what are some ways the controls builder can be pushed down to the bottom?</strong></p>
  
  <pre><code>Widget _createEventControlBuilder(BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
  return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: &lt;Widget&gt;[
        FlatButton(
          onPressed: onStepCancel,
          child: const Text('BACK'),
        ),
        FlatButton(
          onPressed: onStepContinue,
          child: const Text('NEXT'),
        ),
      ]
  );
    }
  </code></pre>
  
  <p>I did try wrapping the above row in a LayoutBuilder as well as another attempt using a SizedBox, setting the height to <code>MediaQuery.of(context).size.height;</code>. It does push it near to the bottom (not quite as much as I like), but the problem is that now there is space beneath controls, causing the screen to scroll down into empty space.</p>
  
  <p>Full code:</p>
  
  <pre><code>    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
      title: Text("Create an Event"),
    ),
    body: Form(
      key: _eventFormKey,
      child: Stepper(
          type: StepperType.horizontal,
          currentStep: _currentStep,
          controlsBuilder: _createEventControlBuilder,
          onStepContinue: () {
            if (_currentStep + 1 &gt;= MAX_STEPS)
              return;
            setState(() {
              _currentStep += 1;
            });
            },
          onStepCancel: () {
            if (_currentStep + 1 &gt;= MAX_STEPS)
              return;
            setState(() {
              _currentStep -= 1;
            });
          },
          steps: &lt;Step&gt;[
            Step(
              title: Text("Name"),
              isActive: 0 == _currentStep,
              state: _getStepState(0),
              content: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: &lt;Widget&gt;[
                  Container(
                    margin: EdgeInsets.only(bottom: 10.0),
                    child: Text(
                      "Give your event a cool name",
                      style: Theme.of(context).textTheme.title,
                    ),
                  ),
                  TextFormField(
                    maxLines: 1,
                    maxLength: 50,
                    maxLengthEnforced: true,
                    decoration: InputDecoration(
                      hintText: "e.g. Let's eat cheeseburgers!",
                    ),
                    validator: (value) {
                      if (value.trim().isEmpty)
                        return "Event name required.";
                    },
                  )
                ],
              )
            ),
  
            Step(
              title: Text("Type"),
              isActive: 1 == _currentStep,
              state: _getStepState(1),
              content: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: &lt;Widget&gt;[
                  Container(
                    margin: EdgeInsets.only(bottom: 10.0),
                    child: Text(
                      "Select an event type",
                      style: Theme.of(context).textTheme.title,
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(bottom: 10.0),
                    child: Row(
                      children: &lt;Widget&gt;[
                        Expanded(
                          child: DropdownButton&lt;int&gt;(
                              items: _stepTwoDropdownItems,
                              hint: Text("Select event type"),
                              isExpanded: true,
                              value: _eventTypeSelectedIndex,
                              onChanged: (selection) {
                                setState(() {
                                  _eventTypeSelectedIndex = selection;
                                });
                              }),
                        )
                      ],
                    )
                  )
                ],
              )
            ),
        ]
      ),
    ),
  );
  }
  </code></pre>