How to SliverAppBar Always Show Shadow - Expanded mode too

Question

I'm Using a SliverAppBar which has a shadow when collapsed (list Scrolled) thanks to the elevation property but I would also like to have a shadow when SliverAppBar is Expanded

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: 0,
      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,
      ),
    );
  }
}

🙏

Answer 1

Use forceElevated: true, on SliverAppBar, by default it false.

Defaults to false, meaning that the [elevation] is only applied when the [AppBar] is being displayed over content that is scrolled under it.
When set to true, the [elevation] is applied regardless.

SliverAppBar(
    forceElevated: true, // here 
    elevation: 20, // question having 0 here
    pinned: true,
    floating: false,
    // ...
)

Does it solve your issue?

Answer 2

Use this property into SliverAppBar Widget like this:

SliverAppBar(
      forceElevated: true, //this is for anytime show elevation shadow color after your appbar without scrolling. 
      elevation: 2, // this is for your elevation color like shadow in the bottom of the appbar.
      // ...
)