Flutter中如何移除TabBar的Elevation（阴影）效果？

首先明确：TabBar组件本身默认不会自带滚动阴影，这个效果大概率来自它的父容器（比如AppBar/SliverAppBar）。以下是几种针对性的解决方法：

• 如果TabBar放在AppBar的bottom中：
  给AppBar添加elevation: 0属性，彻底移除AppBar的阴影效果，示例代码：

  AppBar(
    elevation: 0, // 关键：移除AppBar的阴影
    bottom: TabBar(
      indicatorSize: TabBarIndicatorSize.tab,
      isScrollable: false,
      controller: _tabController,
      indicatorPadding: EdgeInsets.only(left: 16.w, right: 16.w),
      tabs:[
        tab1(),
        tab2(),
        tab3(),
      ],
    ),
  )
  

• 如果使用SliverAppBar实现滚动效果：
  SliverAppBar在滚动时会默认显示阴影，需要同时设置elevation: 0和shadowColor: Colors.transparent（部分场景下shadowColor需要单独设置），示例：

  SliverAppBar(
    elevation: 0,
    shadowColor: Colors.transparent, // 确保阴影完全透明
    pinned: true, // 若需要固定TabBar则保留该属性
    bottom: TabBar(
      // 你的TabBar原有配置
    ),
  )
  

• 排查其他父级Material容器：
  如果TabBar嵌套在其他Material组件内，检查该组件是否设置了elevation属性，将其设为0即可消除阴影。

• 极端情况：自定义背景覆盖阴影：
  若以上方法都无效，可以给TabBar外层套一个Container，设置与页面一致的背景色，通过容器覆盖下方阴影：

  Container(
    color: Colors.white, // 与页面背景色保持一致
    child: TabBar(
      // 你的TabBar原有配置
    ),
  )
  

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