Increase the power of your AppBar and SilverAppBar flutter

Flutter: Increase the power of your AppBar & SliverAppBar 

Author image By Manish Patel  |  Thursday, June 13, 2019 12:24 PM  |  3 min read  |   123

AppBar & SilverAppBar in a flutter

You will know about the collapsing toolbar if you are an Android app developer. It’s a wrapper for a toolbar that executes a collapsing app bar. This is known as the AppBar and SilverAppBar 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 on the User Profile screen. You can see it on the profile screen on Whatsapp.

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

1. Leading

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

2. Title

The title toolbar goes wrapped in the text widget

3. Actions

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

4. Bottom

The bottom is the TabBar below the app bar

5. Flexible space

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

To create a toolbar in a flutter developers 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 at 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 it’s found that it’s the only a statefulwidget that uses preferredsizewidget.

If it’s 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 changed debug banner
  • There are route parameters for showing all the screens of the application. The first screen will be used just for scaling the user profile icon in 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 a method. Use body parameters 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 the 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 the parameters of the silver header. To control tab content, we have made another class silverappbar flutter 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 use the tab bar. You will have to check the flutter official site.

flutter app development

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 on the 1st screen. Also, create a utility class Silver_fab.dart to manage, and translate the animation of the user profile picture.


Flutter: Increase the power of your AppBar & SliverAppBar

Contact Us



Author image

Manish Patel

Manish Patel is a Co-Founder of Concetto Labs, a leading mobile app development company specialized in android and iOS app development. We provide a one-stop solution for all IT related services.

Why Our Client Love Us?

  • Fast kick-off
  • Agile Ready
  • 98% Client Retention
  • 360-Degree solutions

Our integrity and process focuses largely on providing every customer the best recommendations for their respective business. Our clients become recurring customers because we always go beyond their expectations to deliver the best solutions.

Get In Touch
Mr. Sieva Savko
Customer for over 4 years Mr. Sieva Savko Norway

Concetto Labs have provided us with a tremendous amount of help. Their competence in various IT fields led to a positive outcome while facing different challenges. A lot of value was given by their helpful professional staff. To describe this company in three words: effectiveness, collaboration, trust. I would also like to personally thank Mr. Tejas Patel for his positive, friendly, and highly competent approach. The all-around support provided by him made every task at hand a no-brainer.

Miss. Caroline Jack
Customer for over 4 years Miss. Caroline Jack South Africa

It has been an absolute pleasure working with the Concetto Labs team! We have worked together on a few projects now, all of which have been successful. You can rely on good communication and response times from these guys. And they go above and beyond to ensure that the result is achieved. Because of their great service, they have become an integral part of our business and we will continue to use them going forward.

Mr. Richard Bartlett
Customer for over 3 years Mr. Richard Bartlett United States

Concetto Labs is a group of incredibly talented individuals. They are very responsive and communicate with you each and every step of the process. I worked with Manish Patel throughout the entire process and must say that I have never conducted business with a more honest and professional individual. Together with his team, Manish created exactly how we envisioned it to be. Thanks for all of your hard work.

Mr. Conrad Abraham
Customer for over 2 years Mr. Conrad Abraham United States

Concetto Labs team is my go-to for any simple or complex development projects. They have risen to the challenge. Great project management, communication, and super quick turnaround. I’ve done multiple projects with them and don’t plan on changing that.

Mr. Edward Chin
Customer for over 4 years Mr. Edward Chin Canada

Concetto Labs was able to bring my complex idea to life. Throughout the project, Concetto Labs maintained constant communications and was always professional - considering I had no experience in what I wanted to create their welcoming attitude, patience, and knowledge in the field created the perfect environment to work in. I was so impressed with their work that I've kept them on board as my go-to experts. Thanks for the worthwhile experience and the breathtaking product.

Karuna Govind
Karuna Govind CTO & Co Founder (Coupay) London, UK

We started working with Concettolabs due to the influx of work on mobile (Flutter) and frontend (React.js). It's been fantastic working with them. Good, consistent communication and good quality of work means they may be our first choice for many projects to come.

Arunabha Choudhury
Arunabha Choudhury Director (Fuzzann Technologies Private Limited) India

We are a healthcare IT company and wanted to build a Mobile Application for both Android and IOS using Flutter. The Concetto Lab team has been very patient with our project requirements and made sure all our queries are answered. It was a great show of professionalism and customer relationship. Even during the project, the team was very accommodating of all the changes we requested. The project was delivered successfully and we deployed the app in the Android Play Store. Overall, the entire process has been very transparent and the team was able to deliver exactly what we had envisioned the project outcome to look like.

Good Firms Clutch App Futura Microsoft Associate Mobile App Top Developers Gesia
Are you enjoying reading what you see?

Feel like discussing more about this with our Sales Experts? Click on Create Similar Button.