Flutter SliverAppBar Customization [Easy Guide]

In this article, we will customize Flutter sliverappbar and discuss every detail on how the Flutter sliverappbar is implemented in Flutter app and customized according to your app UI requirements. Let’s now throw you directly into the implementation and customization of sliverappbar Flutter.

Introduction: Flutter Sliverappbar

Flutter sliverappbar is a widget that displays an app bar. Flutter sliverappbar can be used to display actions, navigation controls, and other app bar content. Flutter sliverappbar is easy to use and customizable. It is used when you want to hide your app bar to hide when scroll down or collapse to some extent and re expand when scroll up. Flutter sliverappbar is really an awesome widget and should be used in your flutter projects. Let’s see how to implement the flutter sliverappbar in the flutter app.

Flutter Sliverappbar Implementation Steps

Let’s see step by step how to implement the flutter sliverappbar.

Custom Scroll View

CustomScrollView(
              slivers: [ ]
                )

Flutter Sliverappbar Class

SliverAppBar()

We have used the flutter sliverappbar class and it looks just like the normal beautiful flutter appbar which we can see in the above image.

Flutter Sliverappbar Background Color

backgroundColor: Colors.pink,

Flutter sliverappbar background color can be changed using the background color constructor of it.

Sliverappbar Expanded Height

expandedHeight: 200,

Flutter sliverappbar height can be changed using the expanded height constructor of it.

Sliverappbar Leading, Title, Actions

   leading: Icon(Icons.arrow_back),
   title: Text('Flutter Sliver App Bar'),
   actions: [
            Icon(Icons.settings),
             SizedBox(
              width: 10,
                )

             ]

Sliverappbar is just the same as normal beautiful flutter appbar, it has a flutter appbar leading icon constructor, beautiful flutter appbar title and the beautiful flutter appbar actions constructor which are implemented in the code above and can be seen in the above image.

Sliver To Box Adapter

SliverToBoxAdapter(
              child: ListView.builder(
                  primary: false,
                  shrinkWrap: true,
                  itemCount: 10,
                  itemBuilder: (context, index) {
                    return Container(
                      height: 100,
                      width: double.infinity,
                      margin: EdgeInsets.all(20),
                      decoration: BoxDecoration(
                          color: Colors.pink,
                          borderRadius: BorderRadius.circular(20),
                          boxShadow: [
                            BoxShadow(blurRadius: 10, color: Colors.black26)
                          ]),
                    );
                  }),
            )

Sliverappbar Floating

floating: true

pinned: true

Flutter Sliverappbar Flexible Space

  flexibleSpace: FlexibleSpaceBar(
                background: Image.asset(
                  'assets/pizza.png',
                  fit: BoxFit.cover,
                ),
                title: Text('Flutter Sliver App Bar'),
              )

Using the flexible space constructor of the flutter sliverappbar class, we can give background, title etc. to our flutter sliverappbar. We can see that we have used an image in the background and title text in our flutter sliverappbar flexible space. Make sure if you are using title in the flexible space and in the sliverappbar title constructor then remove one of then because when you slide down then both the title text will overlap and won’t look good so it is recommended to use only one at a time.

We can also make both the title centered using the center title constructor and setting it to true in both the flutter flexible space bar and the  sliverappbar.

Congrats for making it so far, now you can easily implement the sliverappbar in your flutter apps.

Conclusion