带列的 SingleChildScrollView，需要底部的按钮

Question

我正在尝试创建一个带有一列的 SingleChildScrollView，我希望在屏幕的最底部有一个按钮。为此，我试图将 SingleChildScrollView 和 FlatButton 作为子项使用堆栈。我最终得到的是这样的：

我无法让按钮粘在底部，即使我已经定位按钮并将其对齐到底部。绿色只是为了显示列的高度，按钮贴在列的底部。Stack、SingleChildScrollView、Column 和 FlatButton 仅占用它们显示所需的空间。我需要将该按钮粘贴到屏幕底部。

这是我用来创建它的代码。我错过了什么？

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,
                  ),
                ),
              ),
            ),
          ),
        )
      ],
    ),
  ),
);

编辑：下面给出的两种方法都可以扩展堆栈以填充整个屏幕。我添加了额外的 TextField 小部件来填满屏幕，然后单击底部的小部件以确保在键盘打开时底部小部件可见，并注意到按钮覆盖了底部字段。就像滚动视图通过忽略那里有一个按钮而向上滚动正确的数量一样。

在下面的图片中，我点击了 End Field 3 小部件。按钮覆盖了它，所以我看不到我正在进入的领域。

Answer 1

使用CustomScrollView：

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

请参阅：/sf/answers/4346855971/

Answer 2

带有浮动操作按钮的选项 1

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

带有底部导航栏的选项 2

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

Answer 3

将此参数添加到堆栈中：fit: StackFit.expand,