1. Leading<\/strong><\/p>\n It\u2019s a widget that comes before displaying the title, which is usually a back button or a hamburger icon<\/p>\n 2. Title<\/strong><\/p>\n The title toolbar goes wrapped in the text widget<\/p>\n 3. Actions<\/strong><\/p>\n You can see it in the app bar. You can see other options of apps such as setting, search, and profile, etc.<\/p>\n 4. Bottom<\/strong><\/p>\n The bottom is the TabBar below the app bar<\/p>\n 5. Flexible space<\/strong><\/p>\n The flexible space widget is used to create a collapsing toolbar with an appbar effect.<\/p>\n To create a toolbar in a flutter developer<\/span><\/strong><\/a>\u00a0make 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.<\/p>\n These widgets enable you to create a perfect and classic app and with flutter is very simple.<\/p>\n Now to modify the AppBar & SilverAppBar in a flutter<\/strong><\/p>\n There are two cases and the first case goes;<\/strong><\/p>\n 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.<\/p>\n 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\u2019s the only a statefulwidget that uses preferredsizewidget.<\/p>\n If its there already, you will have to create your own widget that uses preferredsizewidget.<\/p>\n The silverAppBar works in this way<\/p>\n But what you must need is a card embedded in the SilverAppBar.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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 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<\/span><\/a>.<\/p>\n 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.<\/p>\n<\/span>Case 2<\/strong><\/span><\/h2>\n
<\/span>Creating a new project<\/span><\/h2>\n
\n
![\"flutter](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2019\/03\/flutter-ios-development-1.jpg\" "\\"flutter")
<\/p>\n