Flutter如何在开启resizeToAvoidBottomInset时固定背景尺寸

问题原因 #

当你设置resizeToAvoidBottomInset: true时，Scaffold的body可用高度会自动扣除弹出键盘的高度，因此body内部的自定义绘制背景会跟随可用空间缩小。同时你当前代码在Stack的子组件中使用Expanded属于错误用法，Expanded仅能在Row、Column等Flex类容器中生效，放在Stack中不会产生预期效果。

解决方案 #

方案1：背景层外移（更推荐） #

将固定尺寸的背景层放在Scaffold的外层，Scaffold设置为透明背景，即可完全避免背景受Scaffold内部高度调整的影响，示例代码如下：

class _DebugPage extends State<DebugPage> {
  @override
  Widget build(BuildContext context) {
    // 获取屏幕完整尺寸
    final screenSize = MediaQuery.of(context).size;
    return Container(
      width: screenSize.width,
      height: screenSize.height,
      // 外层先绘制固定尺寸的自定义背景
      child: CustomeShapePainer(),
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        // Scaffold背景设为透明，露出下层背景
        backgroundColor: Colors.transparent,
        appBar: customSubAppBar('Debug', context),
        body: _body(context),
      ),
    );
  }
}

方案2：绘制逻辑绑定屏幕尺寸 #

如果不想调整现有布局结构，可以修改自定义绘制的逻辑，强制使用完整屏幕尺寸作为绘制基准，不要使用绘制方法传入的动态size参数：

class CustomeShapePainer extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 获取屏幕完整尺寸，替代传入的size参数作为绘制基准
    final platformView = WidgetsBinding.instance.platformDispatcher.views.first;
    final screenWidth = MediaQueryData.fromView(platformView).size.width;
    final screenHeight = MediaQueryData.fromView(platformView).size.height;

    // 后续所有绘制逻辑均使用screenWidth、screenHeight计算坐标和尺寸
    // ...你的原有绘制代码
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

两种方案都可以保留resizeToAvoidBottomInset: true的特性，保证输入框正常上移，同时背景不会跟随键盘弹出缩小。

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