Flutter AppBar make bottom widget slowly fade on scroll - flutter

Question

I'm trying to achieve a behavior that is similar to the SliverAppBar coupled with a TabBar, where the AppBar disappears on scroll but the TabBar stays, but in reverse, i.e. The TabBar slowly disappears but the AppBar stays visible. The TabBar (or any other bottom widget) should also reappear when scrolling up again.
I couldn't manage to achieve this behavior with the SliverAppBar, does anyone have an idea how this could be achieved?
This is how I tried, but I don't know how to reverse the behavior or the actual AppBar and the bottom widget.
import 'package:flutter/material.dart';
void main() {
runApp(const TestWidget());
}
class TestWidget extends StatelessWidget {
const TestWidget({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(
useMaterial3: true,
),
home: Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
floating: true,
pinned: true,
snap: true,
title: const Text("My App Title"),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight),
child: SizedBox(
height: kToolbarHeight,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 25,
itemBuilder: (context, index) => FilterChip(
label: Text("Chip $index"),
onSelected: (_) {},
),
),
),
),
),
SliverList(
delegate: SliverChildListDelegate(
List.generate(
100,
(index) => ListTile(
title: Text("Item $index"),
),
),
),
)
],
),
),
);
}
}
Thanks in advance!

Answer 1

Class for ScrollListener
class ScrollListener extends ChangeNotifier {
double bottom = 0;
double _last = 0;
ScrollListener.initialise(ScrollController controller, [double height = 56]) {
controller.addListener(() {
final current = controller.offset;
bottom += _last - current;
if (bottom <= -height) bottom = -height;
if (bottom >= 0) bottom = 0;
_last = current;
if (bottom <= 0 && bottom >= -height) notifyListeners();
});
}
}
Use of ScrollListener to Hide/Show BottomBar:
class HomePage extends StatelessWidget {
final ScrollController _controller = ScrollController();
final double bottomNavBarHeight = 56;
late final ScrollListener _model;
HomePage({super.key}) {
_model = ScrollListener.initialise(_controller);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedBuilder(
animation: _model,
builder: (context, child) {
return Stack(
children: [
ListView.builder(
controller: _controller,
itemCount: 20,
itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
),
Positioned(
left: 0,
right: 0,
bottom: _model.bottom,
child: bottomBar(),
),
],
);
},
),
);
}
Widget bottomBar() {
return SizedBox(
height: bottomNavBarHeight,
child: BottomNavigationBar(
backgroundColor: Colors.amber[800],
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
],
),
);
}
}
more reference also checkout this link