FlutterFlow Docs
Search…
⌃K

NavBar

NavBar (or Navigation Bar) allows you to quickly navigate between pages of your app. It is displayed at the bottom of the screen for convenient access. The items inside the NavBar are represented by an icon, optional text, or both.
You can display between three to five primary or top-level pages (pages that can be accessed from anywhere) of your app inside the NavBar.
From the NavBar settings page, you can add the NavBar, and make modifications such as changing the display style, reordering icons, customing its appearance, and more.
NavBar Demo

Adding NavBar to Your Project

Adding NavBar to your project includes the following steps:

1. Enabling NavBar

By default, the NavBar is off for any project created in FlutterFlow. Before you add pages to the NavBar you need to enable it from the FlutterFlow settings.
To enable NavBar:
  • Click on the Setting and Integrations (
    ) from the Navigation Menu (left side of your screen).
  • Under the General section, select NavBar & AppBar.
  • Turn on the Show Nav Bar toggle.
Initially, you won't have any pages added to the NavBar, so a message will be displayed saying that you should add at least two pages. Make sure you have at least two pages created before you move to the next step. Learn more about adding a new page.
Enabling NavBar

2. Adding pages to NavBar

There are two places you can add pages to the NavBar:
  1. 1.
    The Settings & Integrations tab
  2. 2.
    The NavBar Editor in the App Builder
To start adding pages to the NavBar from Settings & Integrations:
  • Click on the Select Page or Component (
    ) from the Navigation Menu (left side of your screen).
  • Select your Page.
  • Move to Property Editor and scroll down to Nav Bar Item Properties.
  • Turn on the Show on Nav Bar toggle.
  • Find the Label input box and change it to a name that identifies the page in NavBar.
  • Under the Nav Bar Icon, Click on the Home Outlined button, search for a new icon and select the icon that identifies the page in NavBar.
  • If you need to change the icon size, enter the value in the Icon Size property.
  • Similarly, add other pages to the NavBar.
The NavBar appears on the canvas only if you add at least two pages.
Adding page to NavBar
To start adding pages to the NavBar from the NavBar Editor in the App Builder:
  • Click on the NavBar Editor next to your app (bottom right)
  • A pop-up will appear. Turn on the Show on Nav Bar toggle.
  • From this pop-up you can edit the NavBar icon and size. For additional settings click on the Go To Nav Settings.

3. Preview NavBar changes

As you make any changes to the NavBar, the Preview window shows how the NarBar will be displayed when you run the app.
To see the NavBar preview:
  • Click on the Setting and Integrations (
    ) from the Navigation Menu (left side of your screen).
  • Under the General section, select NavBar & AppBar.
  • Tap on any item inside the NavBar or play with the Nav Bar Display Settings (at the bottom) and see the result is being reflected on the Preview window (on the right side).
Preview NabBar changes

Changing NavBar Style

When you enable the NavBar, the default style that is set to the NavBar is Flutter Default Nav Bar. The default NavBar style allows you to show/hide labels for selected/unselected items and customize the selected/unselected item icon color. However, you can change the NavBar style to get more customization options.
You can change the Nav Bar style to any of the following:
  • Flutter Default Nav Bar: The default material style NavBar. You can show/hide labels for the selected/unselected items.
  • Google Nav Bar: The modern Google-style NavBar that slowly animates and reveals the item label (i.e Page name). This style shows the label only for the selected item.
  • Floating Nav Bar: A Nav Bar that floats over the pages. This style shows the label for all the items present in the NavBar.
To change the NavBar style:
  • Click on the Setting and Integrations (
    ) from the Navigation Menu (left side of your screen).
  • Under the General section, select NavBar & AppBar.
  • Find the Nav Bar style dropdown menu and change it to Google Nav Bar or Floating Nav Bar.
Changing NavBar style

Customizing NavBar

You may need to customize the NavBar to match your design. For example, You can customize the NavBar to show a different icon when the item is selected or change the overall appearance of the NavBar.

Showing a different Icon when selected

When the item is selected, the same icon is shown with a different color to give the effect of the item being selected.
To show a different icon when the item is selected:
  • Select your Page.
  • Move to Property Editor and scroll down to Nav Bar Item Properties.
  • Turn on the Different Active Icon toggle.
  • Under the Active Icon, Click on the button, search for a new icon and select the different icon.
  • If you need to change the icon size, enter the value in the Icon Size property.
  • Similarly, set a different icon for other pages as well.
Showing different icon when selected

Changing label text style

To change the label text style:
  • Select your Page.
  • Move to Property Editor and scroll down to Nav Bar Item Properties.
  • Turn on the Custom Nav Bar Text Style toggle.
  • Follow the instructions from here.
  • Similarly, change the label text style for other pages as well.
This setting is only applicable if you have set the Nav Bar style to either Google Nav Bar or Floating Nav Bar.

Changing Nav Button color

This setting is only applicable if you have set the Nav Bar style to the Google Nav Bar.
To change the Nav Button color:
  • Select your Page.
  • Move to Property Editor and scroll down to Nav Bar Item Properties.
  • Find the Nav Bar Button Color property, click on the box next to Unset, select the color, and then click Use 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.
  • Similarly, change the Nav Button color for other pages as well.
To add a Gradient color:
  • Open/Click on the Nav Bar Button Gradient section.
  • Click on the Add Color twice. Click more to get more colors.
  • Enter/Change the color code for added colors.
  • Enter the value in the Transition point to adjust the distribution of each color in the linear gradient. The Transition point can only accept a value between 0.0 to 1.0. If you add 3 colors, you can set the Transition Point as 0.0,0.5 and 1.0 for each color respectively.
  • Enter the Angle in the degree to change the gradient color direction.
  • Click on the Refresh icon
    to reset the color values.
  • Similarly, change the Nav Button color for other pages as well.
Changing Nav Button color

Changing Nav Bar background color

To change the Nav Bar background color:
  • Click on the Setting and Integrations (
    ) from the Navigation Menu (left side of your screen).
  • Under the General section, select NavBar & AppBar.
  • Scroll down to the Styling section.
  • Find the Nav Bar Color property, click on the box next to Unset, select the color, and then click Use 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.
Changing NabBar background color

Customizing Flutter Default Nav Bar

You may want to change the Flutter Default Nav Bar to match your design. For example, showing/hiding labels for selected/unselected items, and customizing the selected/unselected item icon color.

Show/Hide labels

To show/hide labels for selected and unselected items:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • To show/hide labels for the selected item, turn on/off Show Labels (Selected) toggle.
  • To show/hide labels for unselected items, turn on/off Show Labels (Unselected) toggle.
Flutter Default Nav Bar: Show/hide labels

Changing icon color

To change the icon color for selected and unselected items:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • To change the icon color for the selected item, find the Selected Icon Color property, click on the box next to Unset, select the color, and then click Use 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.
  • Similarly, to change the icon color for the unselected items, find the Unselected Icon Color property and change the color.
Flutter Default Nav Bar: Changing icon color

Customizing Google Nav Bar

When the NavBar style is set to the Google Nav Bar, you can change the default appearance of the Google Nav Bar using the various properties available under the Nav Bar Display Settings.

Changing icon and text color

To change the icon and text color for selected and unselected items:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • To change the icon and text color for the selected item, find the Selected Icon & Text Color property, click on the box next to Unset, select the color, and then click Use 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.
  • Similarly, to change the icon and text color for the unselected items, find the Unselected Icon & Text Color property and change the color.
Google Nav Bar: Changing icon and text color

Changing selected item background color

With Google Nav Bar Style, you can also add the background color around the selected item.
To add/change the background color for the selected item:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Selected Background Color property, click on the box next to Unset, select the color, and then click Use 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.
Google Nav Bar: Changing selected item background color

Showing border

The Google Nav Bar style allows you to add and customize the border around the selected and unselected items.
To display the border:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Border Color property, click on the box next to Unset, select the color, and then click Use 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.
  • Now, find the Border Width property below and enter the value. (e.g. 2,5,10)
  • To adjust the rounding corners, find the Border Radius property and enter the value. (e.g. 0,20,50). To remove the rounded corners, set it to 0.
  • To show the same border for the unselected items, turn on the Show Border for Unselected toggle.
If you don't see the Border, make sure you set the Border Color property to a color that is not the same as the NavBar background color (e.g. white color) and Border Width to a non-zero value.
Google Nav Bar: Showing border

Add Nav Button padding

With Google Nav Bar, the Nav Button (item inside the Nav Bar) looks pretty small. However, you can change the default size by adding a Nav Button padding value. Which increases the Nav Button's size.
To add Nav Button padding:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Nav Button Padding and enter the values.
  • Click on the Refresh icon
    to reset the values.
Use the
Lock button to change the Left, Top, Right, and Bottom padding all at the same time. Unlocking will allow you to modify each value separately.
Google Nav Bar: Add Nab Button padding

Add Nav Button margin

Using the Nav Button Margin property, you can add a space around the Nav Button (item inside the Nav Bar).
To add margin:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Nav Button Margin and enter the values.
  • Click on the Refresh icon
    to reset the values.
To notice the difference, Try adding a border or adding a background color to Nav Bar.
Google Nav Bar: Add Nav Button margin

Changing Nav Button alignment

Changing the Nav Button alignment will change how the Nav Buttons are horizontally distributed inside the NavBar.
To change the Nav Button Alignment:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Nav Button Alignment dropdown and select from the options displayed that include Start, Center, End, Space evenly, Space between, and Space around.
Google Nav Bar: Changing Nav Button alignment

Adding space between icon and text

To add space between icon and text:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Gap Between Icon and Text property and enter the value (e.g. 5, 10, 15).
Google Nav Bar: Adding space between icon and text

Changing animation duration

Animation duration defines the time in which the NavBar completes the animation of revealing the item text and other customization such as border and background color.
To change the animation duration:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Animation Duration (ms) property and try setting it to 2000 ms (millisecond). That means the animation will complete in 2000 ms i.e 2 seconds.
To notice the difference, Try adding a border or adding a background color to NavBar.
Google Nav Bar: Changing animation duration

Customizing Floating Nav Bar

When the NavBar style is set to the Floating Nav Bar, you can change the default appearance of the Floating Nav Bar using the various properties available under the Nav Bar Display Settings.

Changing icon and text color

To change the icon and text color for selected and unselected items:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • To change the icon and text color for the selected item, find the Selected Icon & Text Color property, click on the box next to Unset, select the color, and then click Use 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.
  • Similarly, to change the icon and text color for the unselected items, find the Unselected Icon & Text Color property and change the color.
Floating Nav Bar: Changing icon and text color

Changing selected item background color

With Floating Nav Bar Style, you can also add the background color around the selected item.
To add/change the background color for the selected item:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Selected Background Color property, click on the box next to Unset, select the color, and then click Use 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.
Floating Nav Bar: Changing selected item background color

Changing Nav Bar width

You may want to change the default Nav Bar width (which is full width) to make the Nav Bar look floating over the page.
To change the NavBar width:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Width property. There are three ways to set width:
    • To set to an exact size, select PX and enter the desired values.
    • To set the dimensions as a % of the screen size, select % and enter the desired value.
    • To make the width of the NavBar back to the screen's width, just click on the infinity icon (
      ).
Floating Nav Bar: Changing Nav Bar width

Add Nav Button padding

Adding a Nav Button Padding creates an empty space around the Nav Button.
To add Nav Button padding:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Nav Button Padding and enter the values.
  • Click on the Refresh icon
    to reset the values.
To see the space created by entering the padding value, try changing the selected item background color.
Floating Nav Bar: Adding Nav Button padding

Add Nav Button margin

Adding a Nav Button margin creates an empty space around the NavBar.
To add Nav Button margin:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Nav Button Margin and enter the values.
  • Click on the Refresh icon
    to reset the values.
Floating Nav Bar: Adding Nav Button margin

Changing border radius

Changing Border Radius allows you to adjust the rounded corners of the NavBar and Nav Button.
To change the Border Radius:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • For NavBar, find the Border Radius property and enter the value (e.g 0,20,50).
  • For Nav Button, find the Button Border Radius property and enter the value.
  • To remove the rounded corners, set the Border Radius 0.
To see the effect of changing the Border Radius, try changing the selected item background color.
Floating Nav Bar: Changing border radius

Changing elevation

To change the elevation (depth or Z-axis) of the NavBar
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Scroll down to the Styling section.
  • Find the Elevation property and enter the value.

Reordering Nav Bar items

To reorder the Nav Bar items:
  • Navigate to the Setting and Integrations -> General -> NavBar & AppBar -> Nav Bar.
  • Under the Re-Order Page Icon, identify the page that you want to reorder, click on the hamburger icon (icon with three lines
    ) beside it and drag it in the upward or downward direction.
Reordering Nav Bar items