Flutter AppBar标题上方存在多余空白该如何去除

问题原因 #

你看到的AppBar顶部多余空白，是Flutter AppBar 组件默认开启了适配系统状态栏的特性，默认primary属性为true，会自动在顶部预留和状态栏高度一致的padding。
你之前用flexibleSpace时iOS端按钮点击无响应，是因为flexibleSpace的绘制层级低于工具栏（toolbar）层，iOS的手势识别规则不支持穿透上层无点击事件的区域，安卓的手势规则允许部分穿透，所以出现了双端表现不一致的问题，你把按钮移到actions的修改是正确的，actions属于toolbar层内的组件，全平台点击都能正常响应。

解决方法 #

分两种场景按需选择：

场景1：不需要显示顶部状态栏，要让AppBar完全顶到屏幕顶部

1. 先导入flutter服务包：

import 'package:flutter/services.dart';

2. 在页面初始化时隐藏顶部状态栏，同时修改AppBar的primary属性关闭默认顶部padding，可按需自定义toolbarHeight调整AppBar高度：

// 放在页面的initState方法中，仅隐藏顶部状态栏，保留底部操作栏
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom]);

// 修改后的AppBar代码
AppBar(
  elevation: 0,
  titleSpacing: 10,
  centerTitle: false,
  // 关闭默认的状态栏顶部预留padding
  primary: false,
  // 自定义工具栏高度，按需调整数值
  toolbarHeight: 44,
  title: Text(
    'Profile',
    style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.w600,
        backgroundColor: Colors.red),
  ),
  backgroundColor: Colors.amberAccent,
  actions: [
    Visibility(
      child: Container(
        height: 100,
        margin: EdgeInsets.only(right: 5, top: 0.0),
        padding: EdgeInsets.only(top: 0.0),
        child: IconButton(
            icon: Icon(
              Icons.close,
              color: isDark ? Colors.white : Colors.black87,
              size: 25,
            ),
            onPressed: () {
              setState(() {
                editCheck = false;
                showClose = false;
              });
            }),
      ),
      visible: showClose,
    ),
  ],
)

场景2：需要保留系统状态栏，仅消除视觉上的空白感

直接将状态栏颜色设置为和AppBar背景色一致即可，用AnnotatedRegion包裹你的Scaffold组件：

import 'package:flutter/services.dart';

AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle(
    statusBarColor: Colors.amberAccent,
    // 按需调整状态栏文字颜色，深色背景用light，浅色背景用dark
    statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
  ),
  child: Scaffold(
    resizeToAvoidBottomInset: false,
    // 你的原有Scaffold其他代码，AppBar不需要额外修改
    appBar: AppBar(/* 你的原有AppBar配置，不用改primary属性 */),
    body: /* 你的页面内容 */,
  )
)

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