Flutter Drawer头部超出边距问题修复（仅红米Note7安卓10出现）

成因分析 #

这个偶现问题是Flutter旧版本与Android 10系统的Drawer布局渲染兼容性bug：

• DrawerHeader是Flutter封装的组件，内部默认处理了窗口Insets（比如状态栏高度），但在Android 10的小米设备上，从导航页面返回Drawer时，ListView的重绘逻辑和DrawerHeader的Insets计算出现冲突，导致额外的白色边距。
• Android 13等更高版本的系统已经修复了窗口管理相关的底层问题，其他设备没有这个兼容性冲突，所以仅特定设备和场景会触发。

修复方案 #

方案1：替换DrawerHeader为自定义Container（最稳妥） #

放弃使用封装的DrawerHeader，用自定义Container实现相同布局，完全控制边距和渲染逻辑：

Drawer(
  child: ListView(
    padding: EdgeInsets.zero, // 移除ListView默认padding
    children: [
      // 自定义头部替代DrawerHeader
      Container(
        height: 160, // 匹配DrawerHeader默认高度
        color: primaryColor,
        padding: const EdgeInsets.all(16), // 自定义内边距
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const FlutterLogo(size: largeIconSize),
            const SizedBox(width: 70),
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('LA PYAE TEST', style: Theme.of(context).textTheme.headline5),
                Text(
                  '09500007958',
                  style: Theme.of(context).textTheme.headline5?.copyWith(fontSize: textRegular2X),
                ),
                Text(
                  'Balance: 0 MMK',
                  style: Theme.of(context).textTheme.headline5?.copyWith(fontSize: textRegular),
                ),
              ],
            ),
          ],
        ),
      ),
      // 以下ListTile保持不变
      ListTile(
        onTap: () => Navigator.pushNamed(context, notificationRoute),
        leading: const Icon(Icons.notifications_none_outlined, size: 30),
        title: const Text(NOTIFICATION),
      ),
      // ...其他ListTile
    ],
  ),
);

方案2：调整ListView和DrawerHeader的布局参数 #

如果不想替换组件，尝试强制消除边距冲突：

• 给ListView添加padding: EdgeInsets.zero，移除默认的顶部padding
• 给DrawerHeader添加margin: EdgeInsets.zero和clipBehavior: Clip.hardEdge，强制裁剪多余区域

Drawer(
  child: ListView(
    padding: EdgeInsets.zero, // 关键：移除ListView默认padding
    children: [
      DrawerHeader(
        margin: EdgeInsets.zero, // 移除DrawerHeader默认margin
        clipBehavior: Clip.hardEdge, // 强制裁剪
        decoration: BoxDecoration(color: primaryColor),
        child: Row(/* 原内容 */),
      ),
      // ...其他ListTile
    ],
  ),
);

方案3：升级Flutter版本 #

如果项目允许，升级到Flutter 3.7及以上版本，新版本修复了多个旧Android系统的Drawer渲染兼容性问题，大概率能解决这个偶现bug。

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