Flutter使用SliverAppBar时tabbar与body间出现多余空白如何解决？

以下是对应问题的3种常见场景和修复方案： #

场景1：SliverAppBar bottom参数高度与TabBar不匹配 #

这是该问题出现概率最高的原因，PreferredSize设置的高度和TabBar实际高度不一致，或者TabBar默认的上下padding、背景色不统一，都会造成视觉上的空白。
修复代码示例：

SliverAppBar(
  // 其余属性省略
  bottom: PreferredSize(
    // 高度和下方TabBar的实际高度完全一致
    preferredSize: const Size.fromHeight(48),
    child: Material(
      // 背景色和SliverAppBar、TabBar保持统一，避免色差看起来像空白
      color: Colors.white,
      child: TabBar(
        // 移除TabBar默认的所有上下内边距
        padding: EdgeInsets.zero,
        indicatorPadding: EdgeInsets.zero,
        // 其余TabBar配置省略
        tabs: const [
          Tab(text: "标签1"),
          Tab(text: "标签2"),
        ],
      ),
    ),
  ),
)

场景2：TabBarView父组件存在多余边距 #

如果TabBar或者TabBarView的外层包裹组件加了额外的padding/margin，或者使用SliverFillRemaining时属性配置错误，也会出现空白。
修复代码示例：

CustomScrollView(
  slivers: [
    SliverAppBar(/* 配置省略 */),
    // 不要在SliverAppBar和TabBarView之间插入带边距的Sliver组件
    SliverFillRemaining(
      hasScrollBody: true,
      // 不要给TabBarView添加上下内边距
      child: const TabBarView(
        children: [
          // 页面body内容
        ],
      ),
    )
  ],
)

场景3：SliverAppBar折叠高度计算错误 #

如果expandedHeight数值设置不合理，折叠后的AppBar总高度大于toolbarHeight加上TabBar高度的总和，多出来的部分就会显示为空白。
修复代码示例：

SliverAppBar(
  pinned: true,
  // 自定义toolbar高度时要同步修改总高度计算
  toolbarHeight: 56,
  // 仅设置展开状态需要的高度，不要多填冗余数值
  expandedHeight: 200,
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(48),
    child: TabBar(/* 配置省略 */),
  ),
)

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