In this article, we will learn about the AppBar widget. We can use this package only inside Scaffold. We will also see some properties of appbar that we can be use in appbar widget and make it more beautiful according to the our requirements.
Let’s start the work:
- Property Details
- AppBar Example
App Bar is the top area on all the screens. App bars are used to help users navigate through websites and platforms. It’s used for branding, screen titles, navigation, and actions. It Enable the users to move through out the application.
We will discuss details about the properties that are mostly used in every flutter project.
With this peroperty we can change the background color of the appbar.
By using this property we can change the shadow color of the appbar.
This property has the bolean value (true or false). By using this we can align the title of appbar in center or at start. If true, then title will be in center. If false, then title will be at start left side.
By using this we can set the space at the left side of the appbar title. If centerTitle value is false.
This property has double value. By using this we can set the range of the shadow of the appbar.
This is the area of very first at left side of appbar. We can add a custom widget for our requirements. Otherwise in deafult back button in set for this property.
By using this we can set the width of the leading.
This property has the widget value, we can assign text or other widgets according to our requirements.
This property has the list of the widgets. We can use this property to assign different action at the right side of the appbar.
We use this property to set the height of appbar.
We use this to assign the opacing of appbar.
This property has boolean value and by default its value is true. Due to this leading property has set back button by default. If we set this false. then what happen? guess that and write in the comments 🙂
By using this property we can update the back ground color and icon color of status bar. Status bar is the very first top bar that exist on bettery icon, mobile network signal icon, at left side you see time etc…
Here is the example code of appbar
So, in this article, we learn that how can we use the flutter appbar widget and how can we use its properties. How to change background color of AppBar in flutter, how to remove space between title and back button in flutter AppBar, how to add shadow on AppBar in flutter and more…
GitHub Source Code: flutter99/flutter_app_example
If you like this article, please share with friends and support me. Thanks
How to use PinPut Flutter Package in Flutter 2022
Scaffold – Widget of the day #01 | Flutter Beginner
How to use the Flutter Zoom Drawer Package
How to use the flutter native splash package
How to make a flutter counter app with the provider?
How to make Flutter Counter App with GetX
How to make Flutter Counter App with setState
[…] TrendingAppBar – Widget of the Day #02 | Flutter Beginner Guide […]
[…] AppBar – Widget of the Day #02 | Flutter Beginner Guide […]