We have seen the Animated Collapsible Expandable Header in many mobile applications. The animated header is used to show a background image with some text above it. When user starts scrolling the view then it’ll automatically start collapsing image into smaller view and at the end using animation the image will be hidden and only text will be shown in the header bar or title bar. In flutter we would use the SliverAppBar to achieve this amazing functionality. So in this tutorial we would learn about Flutter Animated Collapsible Expandable Header using SliverAppBar Widget Android iOS Example.
Live Screenshot of App:-
Contents in this project Flutter Animated Collapsible Expandable Header using SliverAppBar Widget Android iOS Example:-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating our project’s void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating a Final type color constant named as teal with Material Style Teal color code. We would use this color constant to set background theme color of our app.
|
1 |
final Color teal = Color(0xFF004D40); |
4. Creating our main Root parent class named as MyApp extends StatelessWidget. In this class we would call the AnimatedHeader class.
|
1 2 3 4 5 6 7 8 9 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.light().copyWith(scaffoldBackgroundColor: teal), debugShowCheckedModeBanner: false, home: Scaffold(body: Center(child: AnimatedHeader()))); } } |
5. Creating our second class named as AnimatedHeader extends StatefulWidget. In this class we would make another class named as AnimatedHeaderState with createState() method to enable mutable state management.
|
1 2 3 |
class AnimatedHeader extends StatefulWidget { AnimatedHeaderState createState() => AnimatedHeaderState(); } |
6. Creating our main Child class named as AnimatedHeaderState. In this class we would make our animated header SliverAppBar widget.
|
1 2 3 4 5 |
class AnimatedHeaderState extends State<AnimatedHeader> { } |
7. Creating a Image constant widget named as backgroundImage() in AnimatedHeaderState class. We would use this widget to show the background image on Animated Collapsible Expandable Header.
|
1 2 3 4 5 6 |
Image backgroundImage() { return Image.network( "https://flutter-examples.com/wp-content/uploads/2021/03/Rose.jpg", fit: BoxFit.cover, ); } |
8. Creating another Card widget named as listCard. We would use this widget to display a list of Cards below animated header.
|
1 2 3 4 5 6 7 8 9 10 |
Card listCard(int index) { return Card( elevation: 7, margin: EdgeInsets.only(left: 10, right: 10, top: 10), child: Container( margin: EdgeInsets.symmetric(vertical: 20, horizontal: 10), child: Text("Item $index"), ), ); } |
9. Creating Widget Build Area -> Scaffold widget -> CustomScrollView widget -> SliverAppBar widget.
- pinned : Whether the app bar should remain visible at the start of the scroll view.
- snap : If [snap] and [floating] are true then the floating app bar will “snap” into view.
- floating : Whether the app bar should become visible as soon as the user scrolls towards the app bar.
- expandedHeight : Height of Animated Header.
- elevation : Used to set the shadow of App bar.
- backgroundColor : To set the background color of App bar.
- FlexibleSpaceBar : To set the Text and Background Image on View.
-
SliverList : To show a List.
|
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 |
Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: <Widget>[ SliverAppBar( pinned: true, snap: false, floating: false, expandedHeight: 200.0, elevation: 50, backgroundColor: teal, flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: Text( 'Animated Collapsible Expandable Header', textAlign: TextAlign.center, ), background: backgroundImage(), ), ), SliverList( delegate: SliverChildBuilderDelegate( (context, index) { return listCard(index); }, ), ) ], ), ); } |
10. Complete source code for main.dart file:
|
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); final Color teal = Color(0xFF004D40); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.light().copyWith(scaffoldBackgroundColor: teal), debugShowCheckedModeBanner: false, home: Scaffold(body: Center(child: AnimatedHeader()))); } } class AnimatedHeader extends StatefulWidget { AnimatedHeaderState createState() => AnimatedHeaderState(); } class AnimatedHeaderState extends State<AnimatedHeader> { Image backgroundImage() { return Image.network( "https://flutter-examples.com/wp-content/uploads/2021/03/Rose.jpg", fit: BoxFit.cover, ); } Card listCard(int index) { return Card( elevation: 7, margin: EdgeInsets.only(left: 10, right: 10, top: 10), child: Container( margin: EdgeInsets.symmetric(vertical: 20, horizontal: 10), child: Text("Item $index"), ), ); } @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: <Widget>[ SliverAppBar( pinned: true, snap: false, floating: false, expandedHeight: 200.0, elevation: 50, backgroundColor: teal, flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: Text( 'Animated Collapsible Expandable Header', textAlign: TextAlign.center, ), background: backgroundImage(), ), ), SliverList( delegate: SliverChildBuilderDelegate( (context, index) { return listCard(index); }, ), ) ], ), ); } } |
Screenshots:-
