如何去除Flutter中SliverAppBar的空白区域？

是否有办法去除该空白区域？我已查找相关解决方案但尚未找到，若您知晓方法恳请帮忙。

以下是相关代码：

SliverAppBar(
  shape: const ContinuousRectangleBorder(
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(20),
          bottomRight: Radius.circular(20))),
  pinned: pinned,
  snap: snap,
  floating: floating,
  expandedHeight: 40.0,
  backgroundColor: Color(0xFF2d3b96),
  flexibleSpace: const FlexibleSpaceBar(
    title: Text(
      "Presensi Pegawai",
      maxLines: 1,
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        fontWeight: FontWeight.bold,
        color: Colors.white,
        fontSize: 22.0,
        fontFamily: "IBM-Plex-Sans",
      ),
    ),
  ),
),

解决方法 #

可以通过调整SliverAppBar的布局参数消除空白，推荐以下几种方案：

• 移除FlexibleSpaceBar，直接设置title
FlexibleSpaceBar自带默认布局间距，若不需要展开动画，直接把标题移到SliverAppBar根参数中：

  SliverAppBar(
    shape: const ContinuousRectangleBorder(
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20))),
    pinned: pinned,
    snap: snap,
    floating: floating,
    expandedHeight: 40.0,
    backgroundColor: Color(0xFF2d3b96),
    title: const Text(
      "Presensi Pegawai",
      maxLines: 1,
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        fontWeight: FontWeight.bold,
        color: Colors.white,
        fontSize: 22.0,
        fontFamily: "IBM-Plex-Sans",
      ),
    ),
  ),
  

• 显式设置toolbarHeight与expandedHeight匹配
  expandedHeight设置为40时，默认工具栏高度不匹配会导致留白，添加toolbarHeight参数对齐高度：

  SliverAppBar(
    shape: const ContinuousRectangleBorder(
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20))),
    pinned: pinned,
    snap: snap,
    floating: floating,
    expandedHeight: 40.0,
    toolbarHeight: 40.0,
    backgroundColor: Color(0xFF2d3b96),
    flexibleSpace: const FlexibleSpaceBar(
      title: Text(
        "Presensi Pegawai",
        maxLines: 1,
        textAlign: TextAlign.center,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.white,
          fontSize: 22.0,
          fontFamily: "IBM-Plex-Sans",
        ),
      ),
    ),
  ),
  

• 调整FlexibleSpaceBar的内边距
  若必须保留FlexibleSpaceBar，通过titlePadding调整内边距消除空白：

  flexibleSpace: const FlexibleSpaceBar(
    centerTitle: true,
    titlePadding: EdgeInsets.only(bottom: 8.0),
    title: Text(
      "Presensi Pegawai",
      maxLines: 1,
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        fontWeight: FontWeight.bold,
        color: Colors.white,
        fontSize: 22.0,
        fontFamily: "IBM-Plex-Sans",
      ),
    ),
  ),
  

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