Usage of SliverAppBar in Flutter
3 min readOct 7, 2020
What is SliverAppBar?
SliverAppBar is an app bar widget that you can scroll it. Content of widget can change by upward scrolling. In below, I will show how customize it.
How to use SliverAppBar?
SliverAppBar is used with NestedScrollView widget. First of all, you can add code below in your class.
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: true,
pinned: false,
snap: false,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Cocktails",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://1.bp.blogspot.com/-f7a2_Rn5OLo/X3sDd9KJHZI/AAAAAAABHjM/E4B3Qj7jIH4peHeIZhHiaH-yQd8NVGAuACLcBGAsYHQ/s320/sscreen.jpg",
fit: BoxFit.cover,
)),
),
];
},
body: Center(
child: Text("Home Page"),
)),
);The output of your code will look like this:
By the way, if you want to remove debug banner in right top corner, you should use debugShowCheckedModeBanner: false, in MaterialApp().
You can change border radius of app bar:
What are behaivors SliverAppBar with different configurations behave when a user scrolls up and then down again?
We can control the behavior with these 3 properties:
- floating; whether the app bar should become visible as soon as the user scrolls towards the app bar.
- pinned; if pinned is true, even sliver app bar is closed by upward scrolling, app bar is seen.
- snap; can only be set to true if floating is also true.
The result of the code like below :
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: true,
pinned: false,
snap: false,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Cocktails",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://1.bp.blogspot.com/-f7a2_Rn5OLo/X3sDd9KJHZI/AAAAAAABHjM/E4B3Qj7jIH4peHeIZhHiaH-yQd8NVGAuACLcBGAsYHQ/s320/sscreen.jpg",
fit: BoxFit.cover,
)),
),
];
},
body: ListView(
children: [
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: ListView(
primary: false,
children: [
Row(
children: [
Column(
children: [
Container(
margin: EdgeInsets.all(20),
height: 160,
width: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(80),
image: DecorationImage(
image: NetworkImage(
"https://1.bp.blogspot.com/-oirGA-Yza6U/X3sBs7U83rI/AAAAAAABHik/Ed8adE2mjqQBzkir-kgtLND6pPLj5eJygCLcBGAsYHQ/s616/teq.webp"),
fit: BoxFit.cover),
),
),
Text(
"Tequila Cocktails",
style: TextStyle(fontSize: 20),
),
],
),
Column(
children: [
Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(20),
height: 160,
width: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(80),
image: DecorationImage(
image: NetworkImage(
"https://1.bp.blogspot.com/-7fKWJGsVJPE/X3sBsUOoQRI/AAAAAAABHig/tRMt-HzpMqEqn2toe3rKx-7BGcWQUuN9gCLcBGAsYHQ/s781/camp.jpg"),
fit: BoxFit.cover),
),
),
Text(
"Champagne Cocktails",
style: TextStyle(fontSize: 20),
),
],
),
],
),
Row(
children: [
Column(
children: [
Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(20),
height: 160,
width: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(80),
image: DecorationImage(
image: NetworkImage(
"https://1.bp.blogspot.com/-ZNiUIQ0iOQc/X3sCM3VOlpI/AAAAAAABHi8/nlj8cGI0PCwQ3uEozwlM7MyJPVlRfBohQCLcBGAsYHQ/s320/wine.jpg"),
fit: BoxFit.cover),
),
),
Text(
"Wine Cocktails",
style: TextStyle(fontSize: 20),
),
],
),
Column(
children: [
Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(20),
height: 160,
width: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(80),
image: DecorationImage(
image: NetworkImage(
"https://1.bp.blogspot.com/-w0r5o-MsrDg/X3sBsP9kcXI/AAAAAAABHiY/cWJfshYCFr0Pc2BzVw2VW3Ttkayr1yTAACLcBGAsYHQ/s320/gin.jpg"),
fit: BoxFit.cover),
),
),
Text(
"Gin Cocktails",
style: TextStyle(fontSize: 20),
),
],
),
],
),],),),],)));
}}
