AppBar

The AppBar widget is used to show the information and actions related to the current page. You can use the AppBar widget to customize the back button, page title, and various other options. You need to turn the "Show App Bar" toggle on to see AppBar customizations.

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.

The AppBar widget consists of three sections, Title, Elevation and Colors.

AppBar options

• The AppBar Title section usually includes the title of the page. It can be further customized just like any other Text widget.

• The Elevation field sets the z-coordinate at which to place this app bar relative to its parent.

• The Colors section contains input fields for Shadow Color, Background Color and Back Icon Color.

Each section can be customized based on your needs.

Adding an AppBar to your project

You need to first select a Page from the Page Panel on the left side of the screen and then navigate to the Page Properties section on the right side of the screen to view the "Show App Bar" toggle and turn it on.

Changing the properties

You may want to customize the default AppBar to match your design. The Page 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:

1. Turn the Show App Bar toggle ON.

2. Scroll down to the Background Color property.

3. Enter a Hex Code directly or you can also choose the color by clicking on the Color Palette and selecting a color from the default Themes or customized ones.

Changing the Elevation of the AppBar

To change the elevation (depth or Z-axis) of the AppBar:

1. Turn the Show App Bar toggle ON.

2. Scroll down to the Elevation input field.

3. Enter the value to customize the z-coordinate of the AppBar.

Show/Hide AppBar

You need to turn the "Show App Bar" toggle on to show the AppBar on the selected page. To hide the AppBar, you can simply turn the Show AppBar toggle off.