如何修复Flutter侧边抽屉菜单顶部显示异常白边的问题

问题原因 #

侧边抽屉顶部的白边是 Flutter 中 ListView 组件默认自带的顶部适配 padding 导致的：可滚动组件默认会自动添加适配系统状态栏的留白，避免内容被系统栏遮挡，而该留白是透明的，会透出你外层 Material 组件设置的白色背景，形成可见白边。

解决方法 #

直接给 ListView 组件添加 padding: EdgeInsets.zero 参数，移除默认的顶部留白即可，修改后的代码片段如下：

@override
Widget build(BuildContext context) {
  final name = '' + nome + ' ' + cognome;
  return Material(
      color: Colors.white,
      child: ListView(
        padding: EdgeInsets.zero, // 新增这一行代码即可
        physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
        children: <Widget>[
          // 原有子组件代码保持不变
        ],
    ),
  );
}

可选优化 #

如果你希望侧边栏头部的蓝色区域延伸填充到状态栏下方，也可以直接将外层 Material 的 color 属性修改为和头部一致的 #448BB5 色值，再把下方菜单区域的背景改成白色即可，适配沉浸式状态栏的视觉效果。

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