SingleChildScrollView with Column, need button at bottom

Question

I am attempting to create a SingleChildScrollView with a column in it, and I'd like a button to be at the very bottom of the screen. To do this, I am attempting to use a stack with the SingleChildScrollView and FlatButton as children. What I end up with is this:

I cannot get the button to stick to the bottom, even though I've positioned the button and aligned it to the bottom. The green is just to show the height of the column and that the button is stuck up against the bottom of the column. The Stack, SingleChildScrollView, Column, and FlatButton are only taking up as much space as needed for them to show. I need to stick that button to the bottom of the screen.

This is the code that I'm using to create this. What am I missing?

return Scaffold(
  appBar: AppBar(
    // Here we take the value from the MyHomePage object that was created by
    // the App.build method, and use it to set our appbar title.
    title: Text(widget.title),
  ),
  body: Container(
    width: double.infinity,
    color: Colors.red,
    child: Stack(
      children: <Widget>[
        Container(
          color: Colors.green,
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Protein',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Fat',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Fiber',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Moisture',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Ash',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
              ],
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Align(
            alignment: Alignment.bottomCenter,
            child: ButtonTheme(
              minWidth: double.infinity,
              height: 50,
              child: FlatButton(
                color: Colors.blueAccent.shade400,
                onPressed: () {},
                child: Text(
                  'Calculate Carbs',
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        )
      ],
    ),
  ),
);

Edit: Both of the methods given below work for expanding the Stack to fill the entire screen. I added additional TextField widgets to fill up the screen and then clicked the bottom one to make sure that the bottom widget would be visible when the keyboard was open and noticed that the button covered the bottom field. It's like the scroll view is scrolling up the correct amount by is ignoring that there's a button there.

In the images below, I tapped on the End Field 3 widget. The button is covering it so that I cannot see what I'm entering into the field.

Answer 1

Use CustomScrollView:

CustomScrollView(
  slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: <Widget>[
          const Text('Header'),
          Expanded(child: Container(color: Colors.red)),
          const Text('Footer'),
        ],
      ),
    ),
  ],
)

See: https://stackoverflow.com/a/62097942/5164462

Answer 2

Option 1 with floating action button

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(),
      ),
      floatingActionButton: YourButtonWidget(),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
    );
  }

Option 2 with the bottom navigation bar

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(),
      ),
      bottomNavigationBar: YourButtonWidget(),
    );
  }