FlutterFlow Docs
Search…
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, various actions such as share, search, delete, and so on.
Example 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 a title.
    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.

Adding an AppBar to Your Project

Here's an example of how you can use an AppBar widget in your project:
    First, drag the AppBar widget from the Page Elements tab (in the Widget Panel) or add it directly from the widget tree.
    Click UI Builder from the Navigation Menu (left side of your screen).
    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 Tertiary.
    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 Tertiary.

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 Selected 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 Leading Icon Color

By default, The AppBar widget adds the back button with white color in the leading section. However, this can be replaced with another widget.
To change the color of the leading icon color:
    Select the AppBar from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Default Button Color Property.
    Click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Getting the AppBar Title in Center

To make the AppBar 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 AppBar Height section.
    Find the Center Title property and make sure it's checked.
    If you have added Row then set its Main Axis Size to Min.

Hiding the Default Button

If you are developing a page that doesn't require a back button (e.g. Home Page), you can hide 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.
    Uncheck the Show Default Button property (Click on it).

Changing the Default Button

You may want to change the default button (back button) to something else. For example, on the home page, you can display the profile picture (avatar) of the user.
Here's an example of how you can change the default button 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.
    Uncheck the Show Default Button property (Click on it).
    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.

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 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.
    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).

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.
​
Last modified 1mo ago