SliverAppBar without fading in the AppBar

Question

I really love using Slivers, but really have a Problem with SliverAppBar: usually, I use the SliverAppBar Widget for creating a AppBar that has a Background Image with the Parallax effect. So all I use is the flexible space, which unfortunately gets blocked by the AppBar Portion whenever you scroll down. I tried making the AppBar portion transparent by setting the color value to transparent, but all it does is make the whole thing, including the flexiblespace, transparent..

Is there a way to use only the flexiblespace of a SliverAppBar without fading in the AppBar portion when scrolling down?

here is the code I use:

SliverAppBar(
          expandedHeight: 220,
          pinned: false,
          forceElevated: true,
          backgroundColor: Colors.transparent,
          stretch: true,
          leading: Container(),
          flexibleSpace: FlexibleSpaceBar(
            collapseMode: CollapseMode.pin,
            background:Stack(
              children: <Widget>[
                Image(
                  fit: BoxFit.cover,
                  width: MediaQuery.of(context).size.width,
                  image: AssetImage('assets/images/image2.png'),
                ),
                Positioned(
                  bottom: 0,
                  child: Container(
                    height: 110,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.grey,
                  ),
                ),
                Positioned(
                  bottom: 10,
                  left: 10,
                  child: CircleAvatar(
                    radius: 45,
                    backgroundImage: AssetImage('assets/images/image.png'),
                  ),
                ),
                Positioned(
                  bottom: 77,
                  left: 110,
                  child: Container(
                    width: MediaQuery.of(context).size.width -110 -60,

                    child: Text(
                      'Name...',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: TextStyle(
                          fontSize: 20,
                          color: Colors.white
                      ),
                    ),
                  ),
                ),
                Positioned(
                  bottom: 63,
                  left: 110,
                  child: Container(
                    width: MediaQuery.of(context).size.width -110 -60,

                    child: Text(
                      'description...',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.white70
                      ),
                    ),
                  ),
                ),

                Positioned(
                  bottom: 5,
                  left: 110,
                  child: Container(
                    width: MediaQuery.of(context).size.width-110,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,

                      children: <Widget>[

                      ],
                    ),
                  ),
                ),

              ],
            ),
          ),

        ),

Hope these Images help explain my problem: The flexiblespace looks as follows:Image 1 but once you scroll down, the flexible space fades away as seen in this picture:Image 2 I don't want to flexiblespace to fade away.

Solution

You've propably found the answer allready but I thought if someone like me encounter your question this might be a the answer you are looking for.

FlexibleSpaceBar include fade out animation and only way to exclude it is to write your own LayoutBuilder that will handle the collapse.

Here is a code example how you can create the custom flexibleSpace Widget with LayoutBuilder.

NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          SliverAppBar(
            titleSpacing: 0,
            pinned: false,
            backgroundColor: Colors.transparent,
            automaticallyImplyLeading: false,
            elevation: 0.0,
            actions: [
              IconButton(
                splashRadius: 20,
                icon: Icon(
                  FontAwesomeIcons.cog,
                  color: Colors.grey[200],
                ),
                onPressed: () {
                 
                },
              ),
            ],
            toolbarHeight: kToolbarHeight,
            expandedHeight: maxExtent,
            flexibleSpace: LayoutBuilder(
              builder: (context, constraints) {
                double currentExtent = constraints.maxHeight;
                final double deltaExtent = maxExtent - minExtent;
                // 0.0 -> Expanded
                // 1.0 -> Collapsed to toolbar
                final double t =
                    (1.0 - (currentExtent - minExtent) / deltaExtent)
                        .clamp(0.0, 1.0) as double;

                return Stack(
                  fit: StackFit.loose,
                  overflow: Overflow.clip,
                  children: [
                    Positioned(
                      top: _getCollapsePadding(t),
                      left: 0.0,
                      right: 0.0,
                      height: maxExtent,
                      child: Wrap(
                        crossAxisAlignment: WrapCrossAlignment.start,
                        children: [
                          //Insert Widgets add to your flexible space
                        ],
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
        ];
      },
      body: Container() 
    ),

  double get maxExtent => 300;
  double get minExtent => kToolbarHeight;

  double _getCollapsePadding(double t) {
    final double deltaExtent = maxExtent - minExtent;
    return -Tween<double>(begin: 0.0, end: deltaExtent / 4).transform(t);
  }

Comments

[Josteve]

Can you drop your code?

[astrorain]

Of course. It uses 2 images

[Josteve]

Sorry..but can you drop a clip of what you want to achieve? I couldn't get it with your explanation

[astrorain]

Just added 2 images which should suffice to illustrate the problem.