Flutter: Collapsing Toolbar

Link Copied To Clipboard !

ccollapsing-toolbar-in-flutter Flutter

The Collapsing Toolbar is UI component widely used in our applications today. It consists of displaying an image or background in the upper part of the screen, occupying a fixed space, so that later, by scrolling upwards, the content changes and becomes a navigation bar in iOS or toolbar in the case of Android.

In order to do the same in Flutter, we need to use the Widget called SliverAppBar together with FlexibleSpaceBar as a child.

Here is a simple example :

import 'package:flutter/material.dart';

class CollapsingToolbar extends StatelessWidget {
  final String title;

  CollapsingToolbar({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxScrolled) {
            return <Widget>[
              SliverAppBar(
                automaticallyImplyLeading: true,
                leading: IconButton(
                    icon: Icon(Icons.arrow_back),
                    onPressed: () => Navigator.pop(context, false)),
                expandedHeight: 200.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: false,
                  title: Text(
                    this.title,
                    style: TextStyle(color: Colors.white, fontSize: 16.0),
                  ),
                  /*background: Image.network(
                    "image url goes here",
                    fit: BoxFit.cover,
                  ),*/
                ),
              )
            ];
          },
          body: Center(
            child: Text("Hello World"),
          )),
    );
  }
}

Result :


You May Also Like