SliverAppBar Flutter Example

In this article, we are going to learn to use sliverappbar in flutter applications. SliverAppBar is used to scroll or collapse app bar in flutter applications. We already used simple app bar widget for flutter applications.

Sliver is a part of a scrollable area. Slivers are used to make custom scrolling in flutter applications. In this example, we used custom scrollview widget to integrate slivers in flutter applications. Custom ScrollView widget provides slivers property to achieve various scrolling effects.

We use SliverAppBar widget as first child in slivers property of CustomScrollView widget. We will also use sliverlist to display data in list UI. So when we scroll down data, appbar will collapse.

Pinned property is used pin app bar at the top of scrollview. If pinned property is false then app bar will disappear when we scroll down. If pinned property is true then app bar will be sticky at the top.

expandedHeight property is used to set height of app bar when it is fully expanded. flexibleSpace property is used to display widget when app bar is expanded. We can set FlexibleSpaceBar widget to this flexibleSpace property.

floating property is used to display app bar at the top of the screen. If we set floating property false then app bar will expand until we scroll down and reach the top of the screen. If we set floating property true then app bar will expand when we just scroll up.

snap property is only used when pinned and floating properties are set to true. If we set snap property to true and we scroll down and app bar is not expanded then app bar is snapped in UI.


SliverAppBar Flutter

import ‘package:flutter/material.dart’;

class MySliverAppBarScreen extends StatefulWidget {
_MySliverAppBarScreenState createState() => _MySliverAppBarScreenState();

class _MySliverAppBarScreenState extends State<MySliverAppBarScreen> {

List<String> listSoccerPlayers;

Widget build(BuildContext context) {

listSoccerPlayers = [];
listSoccerPlayers.add(“Cristiano Ronaldo”);
listSoccerPlayers.add(“Lionel Messi”);
listSoccerPlayers.add(“Robert Lewandowski”);
listSoccerPlayers.add(“Neymar Jr.”);
listSoccerPlayers.add(“Kylian MbappĂ©”);
listSoccerPlayers.add(“Mohamed Salah”);
listSoccerPlayers.add(“Sadio Mane”);
listSoccerPlayers.add(“Kevin de Brune”);
listSoccerPlayers.add(“Antoine Griezmann”);
listSoccerPlayers.add(“Sergio Ramos”);
listSoccerPlayers.add(“Luis Surez”);

return Scaffold(
body: CustomScrollView(
slivers: [
        expandedHeight: 200.0,
        floating: false,
         pinned: true,
        elevation: 50,
        flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: Text(“Soccer Players”,
            style: TextStyle(
                color: Colors.white,
                 fontSize: 30,
             fit: BoxFit.cover,
        delegate: SliverChildBuilderDelegate(
             (context, index) => Column(
                 children: [
                tileColor: Colors.white,
                 title: Center(
                         child: Text(listSoccerPlayers[index],
                         style: TextStyle(
                             fontWeight: FontWeight.normal,
                            fontSize: 40,
                             color: //TextStyle
                         ), //Text
                     ), //Center
                Divider(height: 3,)
            ), //ListTile
            childCount: 11,
        ), //SliverChildBuildDelegate

sliverappbar flutter

2 thoughts on “SliverAppBar Flutter Example

Leave a Reply