0

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]),
),
Philippe Fanaro
  • 6,148
  • 6
  • 38
  • 76
  • I can't see in your screenshot where the blurring is. Can you share a screenshot of how it looks before starting the collapse? – J. S. Jan 16 '20 at 10:14
  • The blurring *can* be seen in the screenshot. It's the different shade of grey (different than the overall background) between the top black card and the top bar. – Philippe Fanaro Jan 16 '20 at 10:29
  • Have you tried increasing the elevation of SliverAppBar? e.g (SliverAppBar(elevation: 100.0),), – MαπμQμαπkγVπ.0 May 14 '20 at 11:06

1 Answers1

0

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,
  ),
)
J. S.
  • 8,905
  • 2
  • 34
  • 44