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

392

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

Share:
392
Mark
Author by

Mark

Updated on January 04, 2023

Comments

  • Mark
    Mark over 1 year

    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.

    • flutterloop
      flutterloop about 2 years
      Best solution I can find is, instead of using SliverAppBar, use a regular AppBar in a SliverToBoxAdapter.