Animation for SliverAppBar

123 Views Asked by At

I want to animate a slide transition for my SliverAppBar inside an ExtendedNestedScrollView. I want the appbar to collapse whenever user is not on first tab I was following this example of SliverAnimatedSwitcher to use slide transition instead of default fade transtion. Here is my code:

           ExtendedNestedScrollView(
            key: _key,
            pinnedHeaderSliverHeightBuilder: () {
              return pinnedHeaderHeight / 2;
            },
            onlyOneScrollInBody: true,
            headerSliverBuilder: (context, bool innerBoxisScrolled) {
              return [
                AnimatedSwitcher(
                    layoutBuilder: (currentChild, previousChildren) {
                      return SliverStack(
                          children: [...previousChildren, currentChild!]);
                    },
                    reverseDuration: const Duration(milliseconds: 1000),
                    transitionBuilder: (child, animation) => SlideTransition( //Slide Transition that works on a normal AppBar
                          position: Tween<Offset>(
                            begin: const Offset(0, -1),
                            end: const Offset(0, 0),
                          ).animate(animation),
                          child: child,
                        ),
                    duration: const Duration(milliseconds: 1000),
                    child: appBarManager.currentAppBar),// Switch between the SliverAppBar and a SizedBox 
              ];
            },
            body: TabBarView(
              controller: _tabController,
              children: [
                PostListView(source: source1, pagekey: PageStorageKey('tab1')),
                PostListView(source: source2, pagekey: PageStorageKey('tab2')),
                PostListView(source: source3, pagekey: PageStorageKey('tab3'))
              ],
            ),
          ),

My sliverappbar code:

     SliverAppBar(
      key: ValueKey('1'),
      pinned: true,
      floating: true,
      snap: true,
      elevation: 0,
      actions: [
        Switch(
            value: themeManager.themeMode == dark,
            onChanged: (value) => themeManager.toggleTheme(value),
            activeColor: white),
        IconButton(
            splashRadius: MediaQuery.of(context).size.width * 0.07,
            onPressed: () {},
            icon: const Icon(Icons.add)),
        IconButton(
            splashRadius: MediaQuery.of(context).size.width * 0.07,
            onPressed: () {},
            icon: const Icon(Icons.search)),
      ],
      // expandedHeight: statusBarHeight,
      title: Text(
        'fakebook',
        style: TextStyle(
          fontSize: 29,
          fontFamily: 'Calibri',
          fontWeight: FontWeight.bold,
          letterSpacing: -0.5,
          color: themeManager.themeMode == dark ? white : Palette.facebookBlue,
        ),
      ),
      bottom: widget.tabBar, //the TabBar
    );

I tried with a normal AppBar(using stack instead of SliverStack from sliver_tools, and AppBar instead of SliverAppBar), it works fine but it doesn't have the wanted behavior of a sliverappbar. Is there a way to define my own SliverSlideTransition or a workaround?

0

There are 0 best solutions below