AppBar

The AppBar widget is used to show the information and actions related to the current page. You can use the AppBar widget to display the menu icon, back button, page title, and various actions such as share, search, delete, and so on.
This page guides you on adding and customizing the app bar on a single page. To add the app bar on every new page that you create and customize it, check out the AppBar Settings page.
AppBar
The AppBar widget consists of three sections, Leading, Title, and Actions. 
The Leading section is typically used to show a clickable widget such as the back button, cancel icon, profile icon, menu icon, etc.
The Title section usually includes the title of the page.
The Actions section typically contains clickable widgets that can be used to take actions on that page. 
Each section can be customized based on your needs. Multiple widgets can be added to each section by using layout elements such as rows and columns.
AppBar: Leading, Title, Actions 
Adding an AppBar to your project
There are two places from where you can add the app bar to your page.
1.​From UI Builder​
2.​From Canvas Area​
1. From UI Builder
Here's an example of how you can add an AppBar from the UI builder:
Click on the UI  Builder from the Navigation Menu (left side of your screen).
First, drag the AppBar widget from the Page Elements tab (in the Widget Panel) or add it directly from the widget tree.
Drag the Row widget from the Layout Elements tab to the Title section of the AppBar.
Now, add one CircleImage from the Base Elements tab into the Row. After adding, move to Property editor (on the right side) and scroll down to Radius property and set it to 35.
Add a Text widget (Inside the Row and after CircleImage). Change the name to Username and the Theme Style to Title 1. Set the Left Padding to 10 and Text Color to the white color.
If you are in the Widget Tree section, Open the UI Builder from the Navigation Menu. 
Drag the IconButton widget from the Base Elements tab and carefully drop it into the Actions section of the AppBar. You can tell which section you are about to drop the widget into because it will appear and be shown in red.
Now, move to Property editor and scroll down to Icon property.
Click on the Add Box Outlined + button, then search and select the icon name with video_call. Set its Icon Color property to the white.
Adding AppBar from UI Builder
2. From Canvas Area
Here's an example of how you can add an AppBar from the Canvas:
Select the page.
Inside the canvas, click on the small appbar icon (
) on the right side of the device. This will open the popup to choose the app bar style.
Choose the AppBar style and click on it.
Open the UI Builder from the Navigation Menu. 
Drag the IconButton widget from the Base Elements tab and carefully drop it into the Actions section of the AppBar. You can tell which section you are about to drop the widget into because it will appear and be shown in red.
Now, move to Property editor and scroll down to Icon property.
Click on the Add Box Outlined + button, then search and select the icon name with video_call. Set its Icon Color property to the white.
Adding AppBar from canvas area
Adding SliverAppBar
The SliverAppBar can expand and collapse when you scroll up and down. For example, you can use it to display the user name initially (when collapsed) and reveal his/her profile picture when expanded.
Here's how it looks:
SliverAppBar Demo
To add SliverAppBar:
Make sure you add the AppBar and a ListView with some items.
Select AppBar from the widget tree or the canvas area.
Move to the properties panel, find the App Bar Behavior section and enable the Collapsible (SliverAppBar).
Scroll down to Layout Properties and enter the Expanded Height.
In most cases, you won't need to enter the Collapsed Height because that would be equal to the Toolbar Height, which is 56px by default. However, you can change this default collapsed height (by entering the Collapsed Height value) if you wish to.
​Add a background widget. This will be displayed when the SliverAppBar is expanded.
Find the Title Properties section and enable the Use Flexible Space. When you enable this property and have a background widget, it will beautifully animate between the widget inside the AppBar and a background widget on scrolling up and down.
Adding SliverAppBar
Changing scrolling behavior
By default, the SliverAppBar hides when you scroll down and starts appearing when the first item in the list is reached while scrolling up. You can change this default scrolling behavior using the properties available under the App Bar Behavior section.
Scrolling behavior properties
Properties that control the scrolling behavior:
1.Pinned: When enabled, the SliverAppBar will stick to the top when you scroll down.
2.Floating: When enabled, the SliverAppBar will begin to appear as you scroll up. Once the SliverAppBar is fully visible, the expanded section will start to appear.
3.Snap: This is only available after enabling Floating property. When this is enabled, the SliverAppBar with an expanded section will be fully visible even if you scroll up slightly.
Pinned
Floating
Snap
Pinned
Floating
Snap
To change scrolling behavior:
Select AppBar from the widget tree or the canvas area.
Move to the properties panel, find the App Bar Behavior section and enable the property among the Pinned, Floating, and Snap.
Changing scrolling behavior
Changing the properties
You may want to customize the default AppBar to match your design. The Properties Panel can be used to customize the appearance of your AppBar widget.
Changing the background color
To change the background color of the AppBar:
Select the AppBar from the widget tree or from the canvas area. 
Move to the Property Editor and scroll down to the Background Color Property.
Click on the box next to Primary, select the color, and then click Use Color or click on Primary and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
Changing the background color
Customizing the leading
The default leading for any AppBar is the IconButton widget with a back arrow. You can change its icon or completely replace the leading widget with the widget of your choice.
Change leading icon
The default leading icon for the back button is Arrow Back Rounded (<-). However, you can use the IconButton's property to customize the icon.
To customize the default icon:
Select the leading icon (i.e IconButton widget inside the appbar) from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Button Style section.
To change the icon, click on the Arrow Back Rounded <- button and then search and select the new icon.
To change the icon size, find the Icon Size property and enter the value.
To change the Icon color, find the Icon Color property, click on the box next to White, select the color, and then click Use Color or click on Unset and enter a Hex Code directly.
Customizing leading icon
Change leading widget
You may want to change the leading widget (back button) to something else. For example, on the chat page, you can display the profile picture (avatar) of the user.
Here's an example of how you can change the leading widget:
Delete the IconButton widget from the widget tree or from the canvas area.
Now, If you are in the Widget Tree section, Open the UI Builder from the Navigation Menu.
Drag the CircleImage widget from the Base Elements tab into the Leading section of the AppBar.
Keep the CircleImage selected and move to Property editor and then scroll down to the Padding section. Click on the lock icon (
) and enter the value 10.
Change leading widget
Getting title in the center
To make the page title appear in the center:
Select the AppBar from the widget tree or from the canvas area. 
Move to the Property Editor and scroll down to the Center Title property and make sure it's turned on.
If you have added Row then set its Main Axis Size to Min.
Getting title in center
Showing the default button
The default button usually acts as a back button if a user can navigate to the previous page. if a user can't navigate back and has added the navigation drawer to a page, the default button acts as a button to open and close the drawer.
To show the default button:
Select the AppBar from the widget tree or from the canvas area. 
Move to the Property Editor and scroll down to the AppBar Height section.
Turn on the Show Default Button toggle.
Showing default button
Changing the AppBar height
Sometimes you may want to increase the height of the AppBar to display the image inside the AppBar. You customize the height of the AppBar using the AppBar Height property.
To change the height of the AppBar:
Select the AppBar from the widget tree or from the canvas area. 
Move to the Property Editor and scroll down to the AppBar Height section.
Find the Height property and enter the value as 150.
Now, You should notice that the widget inside the Title section is shifted to the top left corner of the screen.
To get the widget (inside of the Title section) into the center, select the widget, move to the Property Editor and scroll down to the Alignment section. Adjust the widget alignment either using the slider or directly entering the value.
If you have added Row inside of the Title section then set its Main Axis Size to Min.
Change app bar height
To take better advantage of the increased height of the AppBar, Replace the Row widget with the Image widget and set its Height to inf (Click on the
icon).
Change app bar height
Changing the Elevation of the AppBar
To change the elevation (depth or Z-axis) of the AppBar:
Select the AppBar from the widget tree or from the canvas area. 
Move to the Property Editor and scroll down to the AppBar Height section.
Find the Elevation property and enter the value to see the drop shadow effect below the AppBar. The Higher value sets the bigger size of the shadow.
Change appbar elevation
Adding background widget
Sometimes you might want to display an image, video, or any custom widget as a background for the AppBar. To do so:
Select AppBar from the widget tree or the canvas area. 
Move to the properties panel, find the Background Properties section and enable the Add Background Widget. Enabling this will add the Image widget as a default background widget.
To customize or change the widget inside of the AppBar Background widget (see the widget tree on the left), enable Edit in UI Builder.
Now you can customize or add the widget of your choice. After doing this, make sure you disable the Edit in UI Builder to see the AppBar title again.
Adding background widget
Set color dynamically
See how to set a color from variable to any color property of this widget.
Show/Hide AppBar
Please find the instructions to show/hide the widget here​
Page Elements
FloatingActionButton (FAB)
Last modified 7mo ago