Flutter Sliver App Bar With Image Slider

In Flutter we can create Collapsing app bars just like android and iOS. In this tutorial, we are going to create an app bar with a dynamic image as its header.

To add a slider in our collapsing app bar we need flutter_swiper package so lets first add it to our pubspec.yaml:

dependencies:
  flutter_swiper: ^1.1.6

We start by creating a simple Stateful widget:

class HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<HomePage>{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    );
  }
}

In order to create our app bar, we need to use Slivers among CustomScrollView. Based on flutter documentation we can find these two descriptions:

A sliver is a portion of a scrollable area. You can use slivers to achieve custom scrolling effects

A CustomScrollView lets you supply slivers directly to create various scrolling effects, such as lists, grids, and expanding headers. For example, to create a scroll view that contains an expanding app bar followed by a list and a grid, use a list of three slivers: SliverAppBar, SliverList, and SliverGrid.

So we start by creating a CustomScrollView which accepts Slivers as its children:

Widget _customScrollView(){
    return CustomScrollView(
      slivers: <Widget>[

      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _customScrollView(),
    );
  }
}

Now we add two slivers, one for the header and another one is a simple list:

slivers: <Widget>[
  SliverAppBar(
    expandedHeight: 250.0,
    floating: false,
    pinned: true,
    flexibleSpace: FlexibleSpaceBar(
        centerTitle: true,
        title: Text("Collapsing Toolbar",
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.0,
            )),
        background: Swiper(
          itemCount: _images.length,
          itemBuilder: (BuildContext context, int index) => Image.asset(
            _images[index],
            fit: BoxFit.cover,
          ),
          autoplay: true,
        )),
  ),
  SliverList(
    delegate: SliverChildBuilderDelegate(
        (context, index) => Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                height: 75,
                color: Colors.black12,
              ),
            ),
        childCount: 10),
  )
]

As we saw, creating slivers in flutter is really easy and with some extra steps, we will be able to make some awesome UIs out of these concepts.

You can check the source code in my repo:

p4yam/flitter-sliver-appbar-image-slider

Documentations:

CustomScrollView class

https://api.flutter.dev/flutter/material/SliverAppBar-class.html

https://api.flutter.dev/flutter/widgets/SliverList-class.html