AppBar

The AppBar widget is a type of toolbar that's typically displayed at the top of an app screen. It includes a title, navigation controls, and often action buttons.

For example, in a messaging app, the AppBar might display the name of the chat, a back button to return to the chat list, and an action button to start a new conversation.

This guide helps you add and customize the app bar on individual pages. For setting up a consistent app bar across all new pages and customizing it globally, refer to the AppBar Settings page.

The AppBar widget is divided into three main sections: Leading, Title, and Actions.

The Leading section often includes a clickable widget, like a back button, cancel icon, profile icon, or menu icon.
The Title section typically displays the page's title.
The Actions section is reserved for clickable widgets that perform actions related to the page.

Tip: Each section can be tailored to fit your requirements. You can add multiple widgets to each section by utilizing layout elements such as rows and columns for organization.

Let's see how to add an AppBar widget by building an example that looks like below:

Here's how you add it:

Open the Widget Palette and locate the AppBar widget under the Page Elements tab. You can drag it or add it directly from the widget tree or canvas area.
To set the AppBar to any default style, click the icon near the app bar in the canvas area and select the style.
For this example, we enhance the title section by wrapping a Text widget in a Row widget and adding a CircleImage widget to display a profile picture.
In the Actions section, we add the IconButton with a video call icon to initiate a video call.

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:

To add SliverAppBar:

First, add the AppBar and any scrollable widget, such as ListView and GridView with enough content to scroll.
Select AppBar from the widget tree or the canvas area.
Move to the properties panel > AppBar Behavior section > enable the Collapsible (SliverAppBar).
Scroll down to Layout Properties and enter the Expanded Height, which is the height of the SliverAppBar when fully expanded.
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.

Changing scrolling behavior

By default, the SliverAppBar appears as you scroll down and starts to hide when you scroll up, revealing more of the list content. You can modify this behavior using the properties in the AppBar Behavior section to suit your app's design needs.

Scrolling behavior properties

Here are properties that influence the scrolling behavior of the SliverAppBar:

Pinned: Keeps the SliverAppBar at the top of the screen as you scroll up.
Floating: Allows the SliverAppBar to reappear as you scroll down. Once fully visible, the expanded section begins to show.
Snap: Requires the Floating property to be enabled. When active, the SliverAppBar with its expanded section snaps into full view even with a slight downward scroll.

To change scrolling behavior, move to the Properties Panel > AppBar Behavior section and toggle the desired properties: Pinned, Floating, and Snap, to achieve the behavior you want for the SliverAppBar.

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Changing the background color

To change the background color, move to the Properties Panel and change 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 change the icon to any other icon of your choice, such as a close icon (X), a menu icon (☰), or a custom icon that better suits the theme of your app.

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 how you do it:

Getting title in the center

To make the page title appear in the center, move to the Properties Panel > Title Properties > enable the Center Title toggle.

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, move to the Properties Panel and turn on the Show Default Button toggle.

Changing the AppBar height

To change the AppBar height, move to the Properties Panel > Layout Properties and then set the following properties:

AppBar Height: By default, it's the sum of the Toolbar height and the Bottom section height.
Toolbar Height: The height of the toolbar widgets (leading, title, and actions).

Add bottom section

Sometimes you might want to display a widget just below the AppBar that moves with it. For example, displaying a search field just below the AppBar.

You can do so by navigating to Properties Panel > Layout Properties > enable Add Bottom Section. Now, drag and add any widget inside the bottom section. You can also change its height using the Bottom Height property.

Adding elevation

To add the elevation (depth or Z-axis), move the Properties Panel and enter the Elevation value.

The higher value draws the bigger size of the shadow.

To display an image, video, or any custom widget as a background for the AppBar:

Move to the Properties Panel > Background Properties > enable the Add Background Widget. Enabling this will add the Image widget (Under AppBar Background widget) as a default background widget.
To customize or change the widget inside of the AppBar Background widget, enable Edit in UI Builder. After the customization, ensure to disable the Edit in UI Builder to see the AppBar title again.