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, 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. 1.
    ​From UI Builder​
  2. 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​
Last modified 1mo ago