Flutter SliverAppBar — Crypto App
In the previous topic, we played around with AppBar Widget, with some customizations we could create a pretty UI.
In this topic, we will do something more exciting with SliverAppBar. We will create a Crypto App UI by using following techniques:
- Main Widgets: CustomScrollView, SliverAppBar, ListView.builder, Card
- Model
- Mockup
- Package: flutter_sparkline to create graph
First of all, let’s see what can we do with SliverAppBar.
This is definition from flutter:
A material design app bar that integrates with a CustomScrollView.
An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar. App bars typically expose one or more common actions with IconButtons which are optionally followed by a PopupMenuButton for less common operations.
Sliver app bars are typically used as the first child of a CustomScrollView, which lets the app bar integrate with the scroll view so that it can vary in height according to the scroll offset or float above the other content in the scroll view. For a fixed-height app bar at the top of the screen see AppBar, which is used in the Scaffold.appBar slot.
To summarize, SilverAppBar is a widget that you can use to customize app bar for scroll effects. We will use this widget with CustomeScrollView.
In the end, we will create this app.
Let’s break it down:
The top first one is AppBar, we use white background with drawer and profile pic.
The second one is SliverAppBar, we used card to display outstanding balance of Bitcoin. When we scroll up the app, this area will be hidden.
To make it easy to read and maintenance, we created a ProfileCard as another dart file. ProfileCard will contain only static data this time.
The third one is SliverList, SliverList take delegate parameter which provide items in the list. In ere, we display ‘LIVE TRADING’ and ‘Buy’ Button.
The last one is SliverFillRemaining, this will fill remaining of our app screen with LiveTrading(). We also use sparkline widget here to draw a data graph of cypto.
As we focus in creating SliverAppBar, we will not use real API data from internet. Instead, we create a model and mock up a fake data.
Our Crypto model contains, Icon Image, Crpyto Name, Crpyto Price and graph data of each Crpyto.
Conclusion
SliverAppBar is an extension of basic AppBar, it contains of displaying images, background or card(in our topic) in the upper part of the app. By using the widget with other techniques, we could create scroll effect, which make the app quite attractive and user friendly.
You can find the whole source code in Github
