Flutter was introduced by Google that utilize Dart as its programming language. This hybrid platform was launched to simplify the lives of developers. With the hybrid platform, developers don’t have to write different codes for different operating systems- Android or iOS- they can utilize single code for both the platforms, thereby saving time of developers and app development cost of businesses. In order to create flutter toolbar everyone use the popular Appbar widget, and in case of creating dynamic toolbar that when you want to slide to see the content, you can use the great widget called SilverAppBar. These widgets enable you to add a touch of magnificence to your application and with any hesitation, doing it in Flutter is very effortless.
We have come across a very common question that companies or developers often ask is how one can modify the Appbar and SliverAppBar. So we’ve outlined two cases here to explain in a better way:
Case 1:
Let’s assume that you want to create an AppBar, which is not stuck at the top of the screen as you usually do. However, you require having a Drawer on your screen and it should respond to the action of opening the Drawer. Therefore, you should create your own AppBar with the dimensions you want. But the main problem here is that your AppBar widget has a default size that cannot be changed.
While checking the source code you’ll come across the parameter called AppBar from the Scaffold. Thereafter, you will see that it accepts a widget type PreferredSizeWidget. Once you’re done with the process you can review the source code of AppBar. You will find that it is only a StatefulWidget that implements PreferredSizeWidget.
You’re almost there; create your own widget that implements PreferredSizeWidget.
If you want that while pressing the menu button of your AppBar the side menu opens, then we can do it in two ways:
- Using the “AppBar” Widget:
In this method, AppBar is accountable for opening the lateral menu if it is inside a Scafffold.
Using a custom widget-
In this method, you get more flexibility by using the GlobalKey of the ScaffoldState type or else you can use the InheritWidget of Scaffold, with this you’ll have access to methods of the State which you can open Drawer.
Result:
Well, this process is not at all simple. So let’s consider case 2 using SilverAppBar.
Case 2:
As we’ve mentioned above that SilverAppBar works in slide up way. But suppose if you want to put a Card embedded in the SilverAppBar according to the below image:
But a hold a minute, what about the content that is clipped in SilverAppBar, which cannot exceed the constraints and what you can do?
Now don’t worry, first let’s see the source code of SilverAppBar, oh don’t be surprised because SilveAppBar uses StatefulWidget. This widget utilizes a SilverPersistantHeader inside, which is a secret.
But first you should create your own SilverPersistantHeaderDelegate in order to use the SilverPersistentHearder.
Result:
Done! We resolved two cases using both the widgets simultaneously. And the winner is SilverAppBar!
SilverAppBar doesn’t constraint you at any touch point of the entire process whereas the AppBar widget has default size which cannot be changes as we’ve mentioned above. So eventually this creates some issues while creating an app using Flutter AppBar widget. You can use the above cases for changing behavior of both the widgets in Flutter and give your app more beautiful and friendly interface.
Therefore, if you’re proceeding towards SilverAppBar widget for creating some dynamic apps, you should first understand its properties, which are as follows:
- Leading- This widget comes before displaying the title, which is usually a back button or hamburger icon.
- Title- The title toolbar automatically sweeps into the text widget effortlessly in SilverAppBar.
- Actions- You can observe the actions in the app bar and other options as well such as search, setting, profile, etc.
- Bottom- The bottom is the TabBar below the App bar.
- Flexible Space- The flexible space widget is utilized to create a collapsing toolbar with an AppBar effect.
These are some of the common properties of SilverAppBar that would help you make your app development process in Flutter quite seamless. However, while developing the app using SilverAppBar make sure that your app doesn’t collapse by writing better codes for your app.
Bottom line
In the above-mentioned cases and more light to SilverAppBar can help you create amazing apps on Flutter that too without much trouble. However, that doesn’t mean AppBar widget is of no use, if you have enough time and want to show your creativity being a flutter app developer, then this widget can be your ideal choice.
But still, many companies prefer SilverAppBar for their Flutter app development for instant time-to-market. Using widgets actually make your mobile app interface very user-friendly so that your customers experience the best while browsing through your app without clicking off immediately, boosting your conversion rate and sales.
Looking Forward To Hire Experienced Flutter App Development Company?
We at Concetto Labs, are equipped with creative flutter app developers that enable us to deliver highly customized flutter apps as we utilize the latest technology and write impeccable codes. Our team is always updated with the latest trends and believe in one-stop solution to clients worldwide. For more details, you can drop an email us at: or you can call us at
