Flutter - SliverAppBar Examples

Flutter - SliverAppBar Examples

Flutter - SliverAppBar Examples.This tutorial shows you some examples how to create SliverAppBar in Flutter and how you can customize it with the list of available options. This include how to create shrinking header and adjust the scroll effects.

SliverAppBar is a kind of app bar in Flutter that's compatible with CustomScrollView. SliverAppBar is usually used as the first child of CustomScrollView's slivers. This widget allows you to easily create an app bar with various scrolling efects.

A very basic SliverAppBar consisting of title only without any effect can be created with this code:

  slivers: <Widget>[
    SliverAppBar(
      title: Text("SliverAppBar Title"),
    )
  ],

Below are some examples of SliverAppBar with various scroll effects.

Shrinking Header

In the last few years, maybe you have seen some apps, either web or mobile, which have header section that will be shrinked when the user scrolls down the page. It can also be done using SliverAppBar. What we need to set is expandedHeight and flexibleSpace. expandedHeight, as the name suggests, is the height of the app bar when it's fully expanded. In flexibleSpace, you can pass a widget that will be rendered when the app bar is expanded, typically a FlexibleSpaceBar.

  SliverAppBar(
    title: Text("SliverAppBar Title"),
    expandedHeight: 220.0,
    flexibleSpace: FlexibleSpaceBar(
        centerTitle: true,
        title: Text('Title',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.0,
            )),
        background: Image.network(
          'https://images.pexels.com/photos/443356/pexels-photo-443356.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
          fit: BoxFit.cover,
        )
    ),
  ),

To modify scrolling behavior, there are three properties you need to control: pinned, floating, and snap.

If pinned is true, the app bar will always be visible at the top of the scroll view. In other word, the app bar will be sticky at the top. Otherwise, the app bar will disappear when you scroll down.

The second property, floating, makes it possible for the app bar to be displayed at the top of the screen. If you set it to false, you have to scroll up until you reach the top element under the app bar in order to make the app bar expanded again. If you set it to true, just scroll up a little bit and the app bar will be expanded again. You can see the comparison below.

pinned: true, floating: false, snap: false

Flutter SliverAppBar - pinned: true, floating: false, snap: false

pinned: true, floating: true, snap: false

Flutter SliverAppBar - pinned: true, floating: true, snap: false

The last property is snap which can only be used if pinned and floating are both set to true. If you set snap to true, then try to scroll down when the app bar is not expanded, you'll see that the app bar will be snapped into the view.

pinned: true, floating: false, snap: true

Flutter SliverAppBar - pinned: true, floating: false, snap: true

Leading Widget

Another thing you can add is a leading Widget. It's a small area that's rendered on the top left before the title. Usually it's used to render logo or drawer icon.

  SliverAppBar(
    leading: IconButton(
      icon: Icon(Icons.filter_1),
      onPressed: () {
        // Do something
      }
    ),
    ...
  ),

Options

Below is the list of available options you can pass in the constructor.

This is image title

Full Code

  import 'package:flutter/material.dart';

  void main() => runApp(SilverAppBarExample());

  class SilverAppBarExample extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                leading: IconButton(
                  icon: Icon(Icons.filter_1),
                  onPressed: () {
                    // Do something
                  }
                ),
                expandedHeight: 220.0,
                floating: true,
                pinned: true,
                snap: true,
                elevation: 50,
                backgroundColor: Colors.pink,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text('Title',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                        )),
                    background: Image.network(
                      'https://images.pexels.com/photos/443356/pexels-photo-443356.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
                      fit: BoxFit.cover,
                    )
                ),
              ),
              new SliverList(
                  delegate: new SliverChildListDelegate(_buildList(50))
              ),
            ],
          ),
        ),
      );
    }

    List _buildList(int count) {
      List<Widget> listItems = List();

      for (int i = 0; i < count; i++) {
        listItems.add(new Padding(padding: new EdgeInsets.all(20.0),
            child: new Text(
                'Item ${i.toString()}',
                style: new TextStyle(fontSize: 25.0)
            )
        ));
      }

      return listItems;
    }
  }

Flutter

Flutter UI - Stadia App Concept - Full Tutorial

Flutter Responsive UI for Learning Platform App

How to implement Barcodes and QR Codes in Flutter

flutter ios

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Google's Flutter 1.20 stable announced with new features - Navoki

Google has announced new flutter 1.20 stable with many improvements, and features, enabling flutter for Desktop and Web

What is Flutter and why you should learn it?

Flutter is an open-source UI toolkit for mobile developers, so they can use it to build native-looking Android and iOS applications from the same code base for both platforms. Flutter is also working to make Flutter apps for Web, PWA (progressive Web-App) and Desktop platform (Windows,macOS,Linux).

Complete SQLite CRUD Operations in Flutter

Now a days almost all application have to have some kind of data storage. Application without collaboration with other users will make use of local storage db – SQLite. In this tutorial, we are going to cover all CRUD operations in Flutter with SQLite.

Adobe XD plugin for Flutter with CodePen Tutorial

Recently Adobe XD releases a new version of the plugin that you can use to export designs directly into flutter widgets or screens.

Flutter - How to Add AdMob Real Ads in Flutter App | Flutter AdMob Tutorial

Hello Whats is up Everyone So, Today I am going to show u How to Add Admob Real ads in Flutter apps which are very Easy Implement After watching this video u...