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?