Flutter聊天应用输入框底部溢出问题求助

我刚接触Flutter，正在开发一款聊天应用，实现了一个可随输入内容垂直扩展的文本输入组件，但始终遇到bottom overflowed by x Pixel的错误，试了多种方法都没解决。

输入组件代码 #

Widget build(BuildContext context) {
  return SizedBox(
    child: DecoratedBox(
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.background,
      ),
      child: Padding(
        padding: HearthTheme().padding.sendMessageBar,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            SizedBox(width: HearthTheme().spacing.m),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    LocaleKeys.actionBarLeftMessages.tr(
                      args: [
                        widget.credits.toString(),
                      ],
                    ),
                    style: getSmallTextStyle(context),
                  ),
                  SizedBox(
                    height: HearthTheme().spacing.m,
                  ),
                  Padding(
                    padding: EdgeInsets.all(0),
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Theme.of(context).colorScheme.secondary,
                          width: 1,
                        ),
                        borderRadius: HearthTheme().borderRadius.md,
                      ),
                      child: Flexible(
                        child: Padding(
                          padding: HearthTheme().padding.textFieldSendMessage,
                          child: TextField(
                            controller: controller,
                            style: getInputTextStyle(context),
                            decoration: InputDecoration(
                              hintText: LocaleKeys.actionbarType.tr(),
                              hintStyle: getInputTextStyle(context),
                              border: InputBorder.none,
                            ),
                            onChanged: (_) => _updateButtonState(),
                            onSubmitted: (_) => _sendMessageQuestion(),
                            maxLines: null,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(width: HearthTheme().spacing.m),
            GestureDetector(
                onTap: _isButtonEnabled && !widget.loading ? _sendMessageQuestion : null,
                child: Padding(
                  padding: EdgeInsets.only(bottom: 6.6),
                  child: _isButtonEnabled && !widget.loading ? Image.asset(AppAssets.sendActive) : Image.asset(AppAssets.sendInactive),
                )),
            SizedBox(width: HearthTheme().spacing.m),
          ],
        ),
      ),
    ),
  );
}

父组件代码 #

return GestureDetector(
          onTap: () {
            FocusScope.of(context).unfocus();
          },
          child: Scaffold(
            resizeToAvoidBottomInset : true,
            appBar: AppbarWidget(
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => SettingsPage(),
                  ),
                );
              },
            ),
            body: SafeArea(
              child: Column(
                children: [
                  Expanded(
                    child: _MessageList(
                        scrollController: scrollController,
                        date: formattedDate,
                        loading: chatState.loadingBubble,
                        messages: chatState.messages.length > 0
                            ? [VestaMessage(text: LocaleKeys.onboardingTwoChatOne.tr()), ...chatState.messages]
                            : [VestaMessage(text: LocaleKeys.onboardingTwoChatOne.tr()), ...chatState.messages]),
                  ),
                  _ActionBar(
                    scrollController: scrollController,
                    loading: chatState.loadingBubble,
                    credits: chatState.credits,
                  ),
                ],
              ),
            ),
          ),
        );

状态截图 #

输入正常状态：

错误状态：

解决方案 #

1. 给输入组件外层添加可滚动容器 #

将_ActionBar最外层的SizedBox替换为SingleChildScrollView，并禁用滚动物理，确保输入框扩展时内容能被容纳，不会溢出：

Widget build(BuildContext context) {
  return SingleChildScrollView(
    physics: const NeverScrollableScrollPhysics(), // 避免不必要的滚动
    child: DecoratedBox(
      // 原有的DecoratedBox内容保持不变
      ...
    ),
  );
}

2. 限制TextField最大行数 #

虽然maxLines: null允许无限扩展，但设置一个合理的最大行数（如4），同时保留最小行数1，避免输入框过高超出屏幕：

TextField(
  controller: controller,
  style: getInputTextStyle(context),
  decoration: InputDecoration(
    hintText: LocaleKeys.actionbarType.tr(),
    hintStyle: getInputTextStyle(context),
    border: InputBorder.none,
  ),
  onChanged: (_) => _updateButtonState(),
  onSubmitted: (_) => _sendMessageQuestion(),
  maxLines: 4,
  minLines: 1,
)

3. 调整SafeArea的包裹范围 #

将SafeArea仅包裹消息列表，而非整个Column，避免输入区域被SafeArea的内边距限制：

body: Column(
  children: [
    Expanded(
      child: SafeArea( // 移动SafeArea到这里
        child: _MessageList(
          scrollController: scrollController,
          date: formattedDate,
          loading: chatState.loadingBubble,
          messages: chatState.messages.length > 0
              ? [VestaMessage(text: LocaleKeys.onboardingTwoChatOne.tr()), ...chatState.messages]
              : [VestaMessage(text: LocaleKeys.onboardingTwoChatOne.tr()), ...chatState.messages]),
      ),
    ),
    _ActionBar(
      scrollController: scrollController,
      loading: chatState.loadingBubble,
      credits: chatState.credits,
    ),
  ],
),

4. 移除Send按钮的固定底部内边距 #

Send按钮的bottom:6.6内边距会占用额外底部空间，建议移除或替换为主题化的间距：

GestureDetector(
  onTap: _isButtonEnabled && !widget.loading ? _sendMessageQuestion : null,
  child: Padding(
    padding: EdgeInsets.zero, // 替换原有底部padding
    child: _isButtonEnabled && !widget.loading ? Image.asset(AppAssets.sendActive) : Image.asset(AppAssets.sendInactive),
  )),

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