Flutter: Increase the power of your AppBar & SliverAppBar

You will definitely know about collapsing toolbar if you are an Android app developer. It’s a wrapper for toolbar which executes a collapsing app bar. This is known as Silver app bar by the flutter team. It shows background and image in the top section of the screen, settling on a fixed space, so that later, by swiping upwards, the content changes and changes to the toolbar in Android and as a navigation bar in iOS.

The silver app is planned to be used as a direct child of an application bar in the flutter. This widget is usually seen in the User Profile screen. You can see it in the profile screen on Whatsapp.

Let’s look at the properties of the Silver app bar

Leading

It’s a widget that comes before displaying the title, which is usually a back button or a hamburger icon

Title

The title toolbar goes wrapped in the text widget

Actions

You can see it in the app bar. You can see other options of apps such as setting, search, and profile, etc.

Bottom

The bottom is the TabBar below the app bar

Flexible space

The flexible space widget is used to create a collapsing toolbar with an appbar effect.

To create a toolbar in a flutter developer make use of the well – known widget called AppBar and when you wish to have a dynamic toolbar that when you slide it shows the content which is used as a great widget known as SilverAppBar.

These widgets enable you to create a perfect and classic app and with flutter is very simple.

Now to modify the AppBar & SilverAppBar in a flutter

There are two cases and the first case goes;

If you wish to have an AppBar that is not jammed at the top of the screen as most of them do. But users wish to have a sidemenu and the AppBar response to the opening event of the sidemenu. This is what developers want to create with their own AppBar with the dimension that users want.

The issue is that the AppBar widget has a default size and it cannot be changed. When glancing the source code, you might see the parameters known as appBar from the Scafflod, and it accepts the Preferred size widget, and let’s check the source code of AppBar, and its found that it’s the only a statefulwidget that uses preferredsizewidget.

If its there already, you will have to create your own widget that uses preferredsizewidget.

Case 2

The silverAppBar works in this way

But what you must need is a card embedded in the SilverAppBar.

The content that is there in the SilverAppBar is clipped so it can’t exceed the constraints. The source code of the SilverAppBar and the StatefulWidget that makes use of the SilverPersistentHeader. So in order to use this, you have to create your own SilverPersistentHeaderDelegate.

Creating a new project

• To create a new project file you will have to log in with your development IDE.
• Now open Main.dart file and do the edit needed. As you have already set the theme and change debug banner
• There are routes parameter for showing all the screens of the application. The first screen will be used just for scaling the user profile icon on the same place and also include some tabs. You will have to scale and translate the user profile on the second screen.
• Now you will have to create a state full widget that you see in the first app screen under the name collapsing_tab.dart. Here, you will have to edit and construct method. Use body parameter and include defaulttabcontroller as a root of a screen widget. It might control the movement of the tab bar after you change the silver app bar.

In this technique, analyze a scaling state of the user profile picture icon and make a new widget. The output of the above-mentioned code snippet will look like this.

After that, you will have to include a tab bar at the bottom of the silver app bar. You have to delegate parameters of silver header. To control tab content, we have made another class SilverAppBarDelegate. It will form tab bar scroll animation in the right ways as you want. You can see the complete collapsing_tab.dart in the following code snippet that you use in the app. If there are any complications to use tab bar. You will have to check the flutter official site.

Then, you will have to create the 2nd app screen that will show the other case of the silver app bar. You will have to create a collapsing_profile.dart state full widget. It will show you the user profile icon tab that might be seen in the 1st screen. Also create a utility class Silver_fab.dart to manage, translate animation of the user profile picture.

Concetto Labs, Chicago based company established in 2014. Concetto Labs is a leading solution provider for Cross Platform / Hybrid Mobile App development.