CODEWITHSUNDEEP
listviewfluttercustomscrollview
psygo
psygo

Reputation: 7543

How to Disable the Blur Effect When Collapsing a `SliverAppBar` in a `CustomScrollView`

1. The Context

I'm trying to make a ListView that has some empty space at the top so the user can bring top cards to the bottom of the screen, where she can easily access them with her thumb. As discussed in this other StackOverflow question, I couldn't make this happen with a regular ListView, so I switched to its parent, a CustomScrollView.

However, after adding a top SliverAppBar, when I get close to collapsing it, the space blurs into darker shades of grey, as seen in the image below. How can I disable this effect?

enter image description here

2. The Code

The `SliverAppBar I'm using so far is:

SliverAppBar(
  automaticallyImplyLeading: false, // gets rid of the back arrow
  expandedHeight: 250, // the collapsible space you want to use 
  flexibleSpace: FlexibleSpaceBar(
    background: Container(
      color: Colors.transparent
    ),
  ),
),

I've also tried to modify my flexibleSpace: FlexibleSpaceBar, but it didn't seem to work:

flexibleSpace: FlexibleSpaceBar(
  title: AnimatedOpacity(
    opacity: 0.0,
    duration: Duration(seconds: 1),
  ),
  collapseMode: CollapseMode.none,
  stretchModes: [
    StretchMode.fadeTitle,
  ],
  background: Container(color: Colors.grey[850]),
),

Upvotes: 0

Views: 1697

Answers (1)

J. S.
J. S.

Reputation: 9625

It seems the default background color for the SliverList is the canvasColor of the theme. I've managed to make the colors match by using that theme color on your Container on the background of the FlexibleSpaceBar:

FlexibleSpaceBar(
  background: Container(
    alignment: Alignment.center,
    color: Theme.of(context).canvasColor,
  ),
)

Upvotes: 0

Related Questions