Add SliverAppBar to Your Flutter App: A Step-by-Step Guide

Elevate Your Mobile App with Animated App Bars

When it comes to mobile app development, the app bar is an essential component that provides users with important information and actions. But what if you want to take it to the next level by animating the app bar when users scroll up and down? This effect, known as a floating app bar, can be achieved using the SliverAppBar widget in Flutter.

What is SliverAppBar?

SliverAppBar is a successor to the AppBar widget, allowing you to create the floating app bar effect. It expands the app bar when the screen is scrolled up and collapses on scroll down. You can also completely remove or hide the app bar when the user is scrolling down a long list. With its extensive customization options, you can tailor it to your needs.

Getting Started with SliverAppBar

To add SliverAppBar to your Flutter app, you’ll need to use CustomScrollView. Here’s the minimal code to get started:

dart
CustomScrollView(
slivers: [
SliverAppBar(
title: Text('SliverAppBar Demo'),
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset('assets/background.jpg'),
),
),
SliverList(
delegate: SliverChildListDelegate([
// Your list items here
]),
),
],
)


Customizing the Floating Behavior

SliverAppBar has three important properties: pinned, snap, and floating. By combining these properties, you can customize the floating behavior to suit your needs. For example, you can set the pinned value to true to stick the SliverAppBar at the top when scrolling down.

Adding AppBar Inside SliverAppBar

You can also add an AppBar inside SliverAppBar to show a search box or other elements. Here’s an example:

dart
SliverAppBar(
title: Text('SliverAppBar Demo'),
bottom: AppBar(
title: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Search',
),
),
),
//...
)


Adding TabBar with SliverAppBar

To add a TabBar with SliverAppBar, you can use the NestedScrollView widget. Here’s an example:

dart
NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverAppBar(
title: Text('SliverAppBar Demo'),
//...
),
SliverPersistentHeader(
delegate: _SliverAppBarDelegate(
TabBar(
tabs: [
Tab(icon: Icon(Icons.info)),
Tab(icon: Icon(Icons.settings)),
],
),
),
pinned: true,
),
];
},
body: TabBarView(
children: [
// Your tab views here
],
),
)


Listening to SliverAppBar’s Status

You can listen to SliverAppBar’s status to determine whether it’s expanded or collapsed. Here’s an example:

“`dart
ScrollController _controller = ScrollController();

@override
void initState() {
super.initState();
controller.addListener(() {
if (controller.offset > 50) {
// SliverAppBar is collapsed
} else {
// SliverAppBar is expanded
}
});
}
“`

Customizing SliverAppBar

You can customize the look of SliverAppBar and FlexibleSpaceBar by using the Container widget to style other widgets wrapped inside it. For example, you can add rounded corners to the FlexibleSpaceBar using the ClipRRect widget.

By following these examples, you can create a stunning animated app bar that elevates your mobile app’s user experience.