如何实现Flutter中软键盘弹出时的顺滑动画效果？

问题根因分析 #

你提供的两个示例分别存在以下核心问题：

• 第一个示例依赖Scaffold默认的resizeToAvoidBottomInset机制适配软键盘，这套系统自动适配逻辑无自定义能力，在异形屏、带自定义导航栏的场景下容易出现高度计算偏差，且默认动画参数和系统软键盘不匹配，容易出现控件跳变。
• 第二个示例采用硬编码320px键盘高度+监听输入框焦点切换的方案，硬编码高度无法适配不同设备、不同输入法的软键盘高度差异，且焦点监听只能捕获「弹出/收起」两个终态，无法跟随系统软键盘的实时动画进度调整控件位置，过渡效果生硬。

最优实现方案 #

要实现和系统软键盘完全同步的顺滑弹出效果，核心是使用系统提供的实时软键盘高度参数MediaQueryData.viewInsets.bottom，该参数会随着软键盘的动画进度实时返回当前软键盘占据的底部高度，无需硬编码，也无需手动监听焦点。具体实现逻辑如下：

1. 关闭Scaffold默认的适配逻辑，将resizeToAvoidBottomInset设置为false，避免系统自动添加的底部padding干扰自定义适配。
2. 通过MediaQuery.of(context).viewInsets.bottom获取实时软键盘高度。
3. 配合AnimatedContainer将底部占位高度和软键盘高度绑定，设置和系统键盘匹配的动效参数即可。

完整可运行代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Example()));
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    // 实时获取当前软键盘高度
    final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    return Scaffold(
      // 关闭系统默认的软键盘适配
      resizeToAvoidBottomInset: false,
      body: Column(
        children: [
          const Spacer(),
          Container(
            color: Colors.red,
            child: const TextField(),
          ),
          // 底部占位高度跟随软键盘高度实时变化，动效和系统键盘对齐
          AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeOut,
            height: keyboardHeight,
          )
        ],
      ),
    );
  }
}

方案优势 #

• 无硬编码逻辑，自动适配所有设备、所有输入法的软键盘高度，不会出现适配不准的问题
• 控件偏移完全跟随系统软键盘的动画进度同步调整，过渡效果顺滑无跳变
• 实现逻辑简洁，无需手动管理FocusNode和动画状态，维护成本极低

问题动图演示 #

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