Flutter: Collapsing Toolbar

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

Flutter: flutter run stuck at “Installing build/app/outputs/flutter-apk/app-debug.apk” Flutter

Flutter: The non-abstract class ‘InternalSelectableMathState’ is missing implementations for these members Flutter

Firebase Cloud Messaging: Push Notification On Flutter Using PHP Flutter

Flutter: Share State Between Parent And Child Widgets Flutter

Scaffold. of() called with a context that does not contain a Scaffold Flutter