Hi Friends,
Hope you are all well. I know it’s been a long time since I posted. I was working on a course for you guys and hence I din’t get time to post new stuff.
So here’s my course – Click here
Other courses on flutter – here. (Affliate link – keeps my site alive by helping me pay for hosting)
A screencast of this post.
In this post let’s try to create a cool ScrollView effect that you might have come across in several apps.
Okay, First of all I am sorry, I made that GIF from a set of screenshots, so it might not be as smooth as one would expect a gif to be.
Anyway, this is a cool effect right? You could display a nice image and when you try to scroll up it automatically transforms into an appbar. This could be easily done in flutter using a CustomScrollView.
Enough talk, let’s get our hands dirty.
As usual, create a new project.
Open up main.dart file and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( body: new CustomScrollView( slivers: <Widget>[ SliverAppBar( leading: Icon(Icons.arrow_back), expandedHeight: 250.0, pinned: true, flexibleSpace: new FlexibleSpaceBar( background: Image.network('https://placeimg.com/480/320/any'), ), ), new SliverList( delegate: new SliverChildBuilderDelegate((context, index) => new Card( child: new Container( padding: EdgeInsets.all(10.0), child: new Row( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ CircleAvatar( backgroundColor: Colors.transparent, backgroundImage: new NetworkImage('http://i.pravatar.cc/300'), ), SizedBox(width: 15.0), Text('I am the card content!!') ], ), ) ) ), ) ], ) ); } } |
Let’s break this down.
Usually inside a scaffold we specify an appbar and then a body of the app which is essentially what is shown in the screen right ?
Here we are introducing something called a customScrollView and pushing all our content into it. A CustomScrollView helps us to add effects based on the scroll action of the user.
If you notice I am then adding the slivers attribute which is essentially an array of Widgets. We are first introducing a SliverAppBar which is in essence similar to our regular App Bar. The key difference being it gives you more options for customisation. Here I have added the expandedHeight option so that the appBar now covers a larger area of the screen when it is loaded. Then I have brought in an image within the flexibleSpace parameter. The entire image would be shown in the AppBar.
Next I am introducing a SliverList, (This could be a SliverGrid or I could simply fill the remaining space with something). In the sliver list I am simply placing a list of cards. That’s it.
Now let’s run the app and try scrolling.
Wow, it’s even better than we expected right ?
That’s it for now guys. If you found this helpful, kindly share it with someone and help them too.
To learn about bringing in firebase auth and other awesome stuff buy my course – Click here.
Thanks for reading. Peace.. 
