如何让SliverAppBar在展开状态下也始终显示阴影

要实现SliverAppBar展开状态也显示阴影，最简方案是配置SliverAppBar自带的两个属性：

• 将elevation属性调整为你需要的阴影高度（你当前设置为0，没有阴影效果，可根据需求改为4、6等数值）
• 新增forceElevated: true属性，该属性会强制SliverAppBar在展开、折叠所有状态下都显示阴影，不受滚动状态影响

修改后的完整代码 #

class SuperSliverAppBar extends StatelessWidget {
  const SuperSliverAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      pinned: true,
      floating: false,
      snap: false,
      backgroundColor: Colors.grey[200],
      collapsedHeight: 90,
      expandedHeight: 200,
      elevation: 4, // 调整为你需要的阴影高度
      forceElevated: true, // 新增属性，强制所有状态显示阴影
      centerTitle: false,
      title: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("Mr Mister",
              style: TextStyle(
                color: Colors.black,
                fontSize: 22,
              ),
              textAlign: TextAlign.left),
          Row(
            children: [
              Text("Hello Mister",
                  style: TextStyle(
                    color: Colors.black,
                    fontFamily: 'Lato',
                    fontWeight: FontWeight.w300,
                    fontSize: 19,
                  ),
                  textAlign: TextAlign.left),
              SizedBox(width: 10),
              Container(
                  height: 20,
                  width: 20,
                  decoration: BoxDecoration(
                      color: Colors.orange,
                      borderRadius: BorderRadius.all(Radius.circular(1))),
                  child: Center(
                      child: Text("",
                          style: TextStyle(color: Colors.white, fontSize: 10))))
            ],
          ),
        ],
      ),
//Shape is defined here
      shape: const ContinuousRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(100),
              bottomRight: Radius.circular(100))),
      flexibleSpace: FlexibleSpaceBar(
        collapseMode: CollapseMode.none,
        background: Container(),
        centerTitle: true,
      ),
    );
  }
}

如果你需要自定义阴影的颜色、偏移量等效果，也可以选择在SliverAppBar外层包裹Material组件手动配置阴影参数。

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