Flutter Animated Collapsible Expandable Header using SliverAppBar Widget Example

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.

2. Creating our project’s void main runApp() method and here we would call our main MyApp class.

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.

4. Creating our main Root parent class named as MyApp extends StatelessWidget. In this class we would call the AnimatedHeader class.

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.

6. Creating our main Child class named as AnimatedHeaderState. In this class we would make our animated header SliverAppBar widget.

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.

8. Creating another Card widget named as listCard. We would use this widget to display a list of Cards below animated header.

9. Creating Widget Build Area -> Scaffold widget -> CustomScrollView widget -> SliverAppBar widget.

  1. pinned : Whether the app bar should remain visible at the start of the scroll view.
  2. snap : If [snap] and [floating] are true then the floating app bar will “snap” into view.
  3. floating : Whether the app bar should become visible as soon as the user scrolls towards the app bar.
  4. expandedHeight : Height of Animated Header.
  5. elevation : Used to set the shadow of App bar.
  6. backgroundColor : To set the background color of App bar.
  7. FlexibleSpaceBar : To set the Text and Background Image on View.
  8. SliverList : To show a List.

10. Complete source code for main.dart file:

Screenshots:-

Leave a Reply

Your email address will not be published.