In this article, we will customize flutter sliverappbar and discuss every detail on how the flutter sliverappbar is implemented in flutter app and customized according to your app UI requirements. But first, if you want a complete setup on how to install flutter then click here. Let’s now throw you directly into the implementation and customization of flutter sliverappbar.
What Is Flutter Sliverappbar?
Flutter sliverappbar is a widget that displays an app bar. Flutter sliverappbar can be used to display actions, navigation controls, and other app bar content. Flutter sliverappbar is easy to use and customizable. It is used when you want to hide your app bar to hide when scroll down or collapse to some extent and re expand when scroll up. Flutter sliverappbar is really an awesome widget and should be used in your flutter projects. Let’s see how to implement the flutter sliverappbar in the flutter app.
Flutter Sliverappbar Implementation Steps
Let’s see step by step how to implement the flutter sliverappbar.
Custom Scroll View
CustomScrollView( slivers: [ ] )
Always use the flutter custom scroll view widget when using flutter sliverappbar. It has a constructor which takes a list of slivers and that’s where we will pass our sliverappbar.
Flutter Sliverappbar Class
SliverAppBar()
We have used the flutter sliverappbar class and it looks just like the normal beautiful flutter appbar which we can see in the above image.
Flutter Sliverappbar Background Color
backgroundColor: Colors.pink,
Flutter sliverappbar background color can be changed using the background color constructor of it.
Sliverappbar Expanded Height
expandedHeight: 200,
Flutter sliverappbar height can be changed using the expanded height constructor of it.
Sliverappbar Leading, Title, Actions
leading: Icon(Icons.arrow_back),
title: Text('Flutter Sliver App Bar'),
actions: [
Icon(Icons.settings),
SizedBox(
width: 10,
)
]
Sliverappbar is just the same as normal beautiful flutter appbar, it has a flutter appbar leading icon constructor, beautiful flutter appbar title and the beautiful flutter appbar actions constructor which are implemented in the code above and can be seen in the above image.
SliverToBoxAdapter
SliverToBoxAdapter(
child: ListView.builder(
primary: false,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index) {
return Container(
height: 100,
width: double.infinity,
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(blurRadius: 10, color: Colors.black26)
]),
);
}),
)
Let’s now see the magic of sliverappbar, we have to use Flutter SliverToBoxAdapter because we cannot directly give flutter widgets to it as the custom scroll view constructor named slivers is returning a list of slivers. We have given a flutter list view builder to the Flutter SliverToBoxAdapter and if you are giving a scrollable widgets like we did then make the primary to false and shrink wrap to true so we won’t get any conflicts while scrolling. As we can see, when we are scrolling down then the sliverappbar slides and disappears and reappears when we scroll up.
Sliverappbar Floating
floating: true
Making floating to true will result in showing the sliverappbar even if you have scroll all the way to down and scroll up a little bit. This scrolling up a bit will make the sliverappbar visible again.
Sliverappbar Pinned
pinned: true
Making pinned to truewill result in always showing the sliverappbar even if you are scrolling down. When the pinned is true and you scroll down then only the expanded part of the sliverappbar will hide/shrink which in our example is 100 because we have specified it.
Flutter Sliverappbar Flexible Space
flexibleSpace: FlexibleSpaceBar(
background: Image.asset(
'assets/pizza.png',
fit: BoxFit.cover,
),
title: Text('Flutter Sliver App Bar'),
)
Using the flexible space constructor of the flutter sliverappbar class, we can give background, title etc. to our flutter sliverappbar. We can see that we have used an image in the background and title text in our flutter sliverappbar flexible space. Make sure if you are using title in the flexible space and in the sliverappbar title constructor then remove one of then because when you slide down then both the title text will overlap and won’t look good so it is recommended to use only one at a time.
We can also make both the title centered using the center title constructor and setting it to true in both the flutter flexible space bar and the sliverappbar.
Congrats for making it so far, now you can easily implement the sliverappbar in your flutter apps. The complete source code is given below:
Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter SliverAppar',
home: SliverAppBarClass());
}
}
class SliverAppBarClass extends StatelessWidget {
const SliverAppBarClass({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
floating: true,
pinned: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40))),
leading: Icon(Icons.arrow_back),
title: Text('Flutter Sliver App Bar'),
actions: [
Icon(Icons.settings),
SizedBox(
width: 10,
),
],
flexibleSpace: FlexibleSpaceBar(
background: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40)),
child: Image.asset(
'assets/pizza.png',
fit: BoxFit.cover,
),
),
centerTitle: true,
title: Text('Flutter Sliver App Bar'),
),
backgroundColor: Colors.pink,
expandedHeight: 200,
),
SliverToBoxAdapter(
child: ListView.builder(
primary: false,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index) {
return Container(
alignment: Alignment.center,
height: 100,
width: double.infinity,
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(blurRadius: 10, color: Colors.black26)
]),
child: Text(
'It\'s your turn to implement it in your project now',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
);
}),
)
],
),
),
);
}
}Note:
Hope you like this article on how to implement and customize beautiful flutter sliverappbar. Would love to have you on our other articles on beautiful flutter widgets, flutter templates and many more. Thanks for reading.
Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions.
You also may like:
