Is it possible to have a SliverAppBar be transparent when expanded and then take a color when collapsed?

Issue

Is there any easy way to have a SliverAppBar be transparent when expanded and then take a color when collapsed when used in combination with a FlexibleSpaceBar?

I want to use the FlexibleSpaceBar so that my title will collapse when the sliver list is scrolled up and down

It seems right now the default behavior is the opposite. If you make the sliverAppBar transparent off the bat

                  SliverAppBar(
                    pinned: true,
                    expandedHeight: 100.0,
                    elevation: 0,
                      backgroundColor: Colors.transparent,

Then there is no way to control the background color when its collapsed. If you try to give a color here, then when its collapsed it successfully has a color but it cannot be made transparent when expanded.

Solution

Ok I ultimately solved this by keeping the SliverAppBar as transparent, and then placing a Container widget into it. Then using a scrollcontroller listener, I would animate the color of the containers background color as a scroll is happening.

It was a painful process, but it is working flawlessly

Answered By – Mark

Answer Checked By – Timothy Miller (FlutterFixes Admin)