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
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
Show/Hide AppBar
Please find the instructions to show/hide the widget here​