Flutter 2.10.5 Web端Android设备键盘上方未知黑块问题排查

问题确认 #

这是Flutter Web在Android设备上的已知兼容性问题，尤其在2.x版本中较为常见。核心原因是Flutter Web对Android系统软键盘的视图计算存在偏差，导致布局重绘时出现异常空白/黑块，且因设备系统版本、浏览器环境差异，表现不稳定（有时出现有时消失）。远程调试无报错日志、键盘显示在中间区域且底部留空白，都是该问题的典型表现。

可行修复方案 #

针对你当前使用的Flutter 2.10.5版本，可尝试以下手段解决：

• 调整SafeArea配置：移除bottom: false参数，让Flutter自动处理底部与软键盘的间距，避免手动禁用导致的布局计算错误：

  SafeArea(
    // 移除 bottom: false
    child: Container(
      // 原有代码保留
    ),
  )
  

• 显式设置resizeToAvoidBottomInset：在Scaffold中添加该属性并设为true，强制布局随软键盘弹出自动调整：

  return Scaffold(
    backgroundColor: Colors.black87,
    resizeToAvoidBottomInset: true, // 添加该行
    body: SafeArea(
      // 原有代码保留
    ),
  );
  

• 升级Flutter版本：Flutter 3.x及以上版本对Web端软键盘适配做了大量优化，升级到最新稳定版（如3.10+）能从根源上解决这类兼容性问题。
• 手动监听键盘高度调整布局：若暂时无法升级，可通过监听系统视图Insets手动调整页面布局：

  import 'package:flutter/services.dart';
  
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPersistentFrameCallback((_) {
      final bottomInset = WidgetsBinding.instance.window.viewInsets.bottom;
      // 根据bottomInset值动态调整页面底部padding或容器高度
    });
  }
  

调整后的Scaffold代码示例 #

return Scaffold(
  backgroundColor: Colors.black87,
  resizeToAvoidBottomInset: true,
  body: SafeArea(
    child: Container(
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage(Images.backgroundImg),
              fit: BoxFit.fitHeight)),
      child: PageLayout(
        header: NotAuthorizedHeader(
          isBackPress: false,
        ),
        child: LoginLayout(
            onLogin: props.login,
            loading: props.isAuthenticating,
            authMessageError: props.authMessageError),
        getMoreList: () {},
        loadingMore: false,
      ),
    ),
  ),
);

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