如何在Flutter中实现按钮固定在屏幕底部

你可以通过外层嵌套Column拆分可滚动表单区域和底部按钮区域的方式，实现按钮固定在屏幕底部，无需手动设置padding适配不同屏幕尺寸，修改后代码如下：

Scaffold(
  body: Container(
    height: height,
    width: width,
    child: Column(
      children: [
        // Expanded自动占满除按钮外的所有剩余空间
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(left: 15, right: 10, top: 30),
                  child: InputField(
                    textController: receiverController,
                    hint: 'نام گیرنده پیام را وارد کنید',
                    label: 'گیرنده',
                    obscure: false,
                    icon: Icons.person_add_alt_1_outlined,
                    radius: 15,
                  ),
                ),
                SizedBox(height: 10),
                Padding(
                  padding: const EdgeInsets.only(left: 15, right: 10),
                  child: InputField(
                    textController: subjectController,
                    hint: 'عنوان پیام را وارد کنید',
                    label: ' عنوان ',
                    obscure: false,
                    icon: Icons.title,
                    radius: 15,
                  ),
                ),
                SizedBox(height: 10),
                Padding(
                  padding: const EdgeInsets.only(left: 15, right: 10),
                  child: InputField(
                    textController: textController,
                    label: ' متن',
                    obscure: false,
                    icon: Icons.message,
                    radius: 15,
                  ),
                ),
                SizedBox(height: 20)
              ],
            ),
          ),
        ),
        // 按钮固定在Column底部，即屏幕底部
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 80, vertical: 16),
          child: ButtonTheme(
              minWidth: width * .25,
              height: 50,
              child: RaisedButton(
                onPressed: () {
                  newmessageBloc.add(NewmessageEventSend(
                      receiver: receiverController.text,
                      subject: subjectController.text,
                      text: textController.text));
                },
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(
                      'ارسال',
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 16),
                    ),
                    Icon(
                      Icons.send_rounded,
                      color: Colors.white,
                    ),
                  ],
                ),
                color: Color(0xff333399),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15.0),
                ),
              )),
        )
      ],
    ),
  ),
);

实现说明 #

• 所有输入表单放在Expanded包裹的SingleChildScrollView中，内容超出屏幕高度时可以正常滚动，不会被底部按钮遮挡
• 按钮直接置于外层Column的最底部，永远固定在屏幕底部位置，不会随表单滚动
• 移除了原代码中硬编码的80上下padding，改为表单底部加20最小间距，避免键盘弹出时按钮与输入框距离过近
• 自适应所有屏幕尺寸，无需根据设备调整padding数值

替代方案 #

如果你的页面根组件是Scaffold，也可以直接将按钮组件赋值给Scaffold的bottomNavigationBar属性，同样可以实现底部固定效果，无需额外嵌套Column结构。

内容的提问来源于stack exchange，提问作者zahra