Flutter Collapsing Toolbar :

Flutter collapsing toolbar is a part of the UI components which provides a expandable and collapsible app bar.We are using a silver app bar in this process.

App Bar is a most common UI widget in every app which deals with the app title or sometimes the screen title in which it is showing the screen details.

As you are aware that header and footer are there for every app, Appbar is the header part which is almost common for every app and in this tutorial we will add some more features in this appBar.

Now a days most of the apps like what’s app, telegram, swiggy and more apps use these collapsible toolbar to provide additional details regarding the user, food details.

We are having two components

1. SilverAppBar
2. SilverFillRemaining

SliverAppBar(
  
),

And remaining content is provided in SilverFillRemaining which contains the body data i.e., Grid View is added into the SilverFillRemaining

SliverFillRemaining(

)

Flutter Collapsing Toolbar Video Tutorial :

Go through the below tutorial for more detailed implementation

main.dart :

Initialize with void main()

void main(){
  runApp(MyApp());
}

We are considering a MyApp class and extending a StatefulWidget

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

We need to provide a app bar with height of 200 and added flexible space in which we are providing title, and background image which is loaded from Url and also can be loaded from assets folder.

SliverAppBar(
  expandedHeight: 200,
  pinned: true,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('AndroidCoding.in'),
    background: Image.network('https://picsum.photos/250?image=9')
  ),
),

Here we are designing a Grid view column we are providing padding on all sides, color and child where we have provided a text and its styles.

Container(
  padding: const EdgeInsets.all(2),
  child: Center(child: const Text("Home",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
  color: Colors.blueGrey,
),

Providing the SilverGrid GridView with a axis count 2, crossAxisSpacing and mainAxisSpacing with a children widget to add multiple gridview columns.

sliver: SliverGrid.count(
  crossAxisSpacing: 5,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: <Widget>[

  ],
),

This is the content to be filled in remaining space after app bar, CustomScrollView is added to implement a scroll view and to add the data in the form of GridView.

SliverFillRemaining(
  child: CustomScrollView(
    primary: false,
    slivers: <Widget>[
      SliverPadding(
        padding: const EdgeInsets.all(20),
        sliver: SliverGrid.count(
          crossAxisSpacing: 5,
          mainAxisSpacing: 10,
          crossAxisCount: 2,
          children: <Widget>[
            Container(
              padding: const EdgeInsets.all(2),
              child: Center(child: const Text("Home",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
              color: Colors.blueGrey,
            ),
            Container(
              padding: const EdgeInsets.all(2),
              child: Center(child: const Text("Profile",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
              color: Colors.blueGrey,
            ),
            Container(
              padding: const EdgeInsets.all(2),
              child: Center(child: const Text("Settings",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
              color: Colors.blueGrey,
            ),
            Container(
              padding: const EdgeInsets.all(2),
              child: Center(child: const Text("About",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
              color: Colors.blueGrey,
            ),
            Container(
              padding: const EdgeInsets.all(2),
              child: Center(child: const Text("More",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
              color: Colors.blueGrey,
            ),
            Container(
              padding: const EdgeInsets.all(2),
              child: Center(child: const Text("Help",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
              color: Colors.blueGrey,
            ),
          ],
        ),
      ),
    ],
  ),
)

Full Code :

Here is the full code for integrating collapsible toolbar.

import 'package:flutter/material.dart';


void main(){
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.black),
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 200,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('AndroidCoding.in'),
                background: Image.network('https://picsum.photos/250?image=9')
              ),
            ),

            SliverFillRemaining(
              child: CustomScrollView(
                primary: false,
                slivers: <Widget>[
                  SliverPadding(
                    padding: const EdgeInsets.all(20),
                    sliver: SliverGrid.count(
                      crossAxisSpacing: 5,
                      mainAxisSpacing: 10,
                      crossAxisCount: 2,
                      children: <Widget>[
                        Container(
                          padding: const EdgeInsets.all(2),
                          child: Center(child: const Text("Home",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
                          color: Colors.blueGrey,
                        ),
                        Container(
                          padding: const EdgeInsets.all(2),
                          child: Center(child: const Text("Profile",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
                          color: Colors.blueGrey,
                        ),
                        Container(
                          padding: const EdgeInsets.all(2),
                          child: Center(child: const Text("Settings",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
                          color: Colors.blueGrey,
                        ),
                        Container(
                          padding: const EdgeInsets.all(2),
                          child: Center(child: const Text("About",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
                          color: Colors.blueGrey,
                        ),
                        Container(
                          padding: const EdgeInsets.all(2),
                          child: Center(child: const Text("More",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
                          color: Colors.blueGrey,
                        ),
                        Container(
                          padding: const EdgeInsets.all(2),
                          child: Center(child: const Text("Help",style: TextStyle(color: Colors.white,fontSize: 20),textAlign: TextAlign.center,)),
                          color: Colors.blueGrey,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            )

          ],
        ),
      ),
    );
  }
}

Output :

This screen below depicts the usage of flutter collapsible toolbar