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. An icon, optional text, or both represent the items inside the NavBar.

You can display up to three or 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, customizing its appearance, and more.

Adding NavBar

Adding NavBar to your project comprises 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:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar.

  2. Turn on the Show Nav Bar toggle.

At the beginning, your NavBar won't have any pages in it. You'll see a message telling you to add at least two pages. Before you proceed, be sure to create at least two pages. If you need help with adding a new page, you can find more information here.

2. Adding pages to NavBar

Once enabled, you must choose which pages you want to appear in the navigation bar and then add them there. Here's how you can do it:

  1. Open the page you want to include in the NavBar.

  2. Go to the Properties Panel > Nav Bar Item Properties.

  3. Turn on the Show this page on the NavBar switch.

  4. In the Label field, give the page a name that you want to see in the NavBar.

  5. You can also select the appropriate Nav Bar Icon and choose its Size.

  6. Follow similar steps to add other pages to the NavBar.

  • Please note that the NavBar will only show up on the canvas if you've added at least two pages to it.

  • If you prefer, you can also use the "Add NavBar" icon on the Canvas to perform similar actions.

Showing NavBar without adding page

Sometimes, you might want to display the navbar on a page without adding it to the navbar. For example, displaying the navbar on internal pages so that users can jump directly to top-level pages using the navbar.

To show the navbar on page that is not on navbar:

  1. First, Enable Deep Linking by navigating to Settings & Integrations > General > App Details > Deep Linking & Routing. For a new project, this is enabled by default.

  2. Open the specific page where you wish to have the navigation bar visible.

  3. Move to the properties panel and enable the Always Show Nav Bar on Page. If you can't enable this option, ensure you change the navbar style to Google or Floating Nav Bar.


Changing NavBar style

When you enable NavBar, it initially uses the Flutter Default Nav Bar style. However, if you want more customization options, you can set the Nav Bar Style dropdown to one of the following:

  • Flutter Default Nav Bar: This is the standard material style NavBar. You can choose to show or hide labels for selected and unselected items.

  • Google Nav Bar: This is a modern Google-style NavBar with a subtle animation that reveals the item label (page name). It displays the label only for the selected item.

  • Floating Nav Bar: This NavBar style appears as a floating element above the pages. It shows labels for all items present in the NavBar.


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 an item is selected, it's displayed with the same icon but in a distinct color to indicate its selection. To showcase a different icon when an item is selected, follow these steps:

  1. Open your Page.

  2. Go to the Properties Panel > Nav Bar Item Properties.

  3. Activate the Different Active Icon option.

  4. Under Active Icon, search and select a new icon of your choice.

  5. If you need to adjust the icon's size, enter the desired value in the Icon Size property.

  6. Repeat the same process to set different icons for other pages.

Changing label text style

To change the label text style:

  1. Open your Page.

  2. Go to Properties Panel > Nav Bar Item Properties.

  3. Turn on the Custom Nav Bar Text Style toggle.

  4. Follow the instructions from here.

  5. 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 to Google Nav Bar style.

To change the Nav Button color:

  1. Open your Page.

  2. Go to Properties Panel > Nav Bar Item Properties.

  3. Change the color using Nav Bar Button Color property.

To customize the Nav Bar Button Gradient, follow these steps:

  1. Open or click on the Nav Bar Button Gradient section.

  2. Click Add Color twice or more to include additional colors.

  3. Enter or modify the color code for each added color.

  4. Adjust the distribution of each color in the linear gradient by entering values in the Transition Point. This should be between 0.0 to 1.0. For instance, if you have three colors, set the Transition Points as 0.0, 0.5, and 1.0 for each color, respectively.

  5. To change the direction of the gradient color, enter the desired Angle in degrees.

  6. Apply similar changes to the Nav Button color for other pages as required.

Changing Nav Bar background color

To change the Nav Bar background color, navigate to the Setting and Integrations > General > NavBar & AppBar > Styling section and then use the Nav Bar Color property.

Customizing Flutter Default Nav Bar

To align the Flutter Default Nav Bar with your design aesthetic, you may consider adjusting the visibility of labels or altering icon colors.

Show or hide labels

To show/hide labels for selected and unselected items:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. To show/hide labels for the selected item, turn on/off Show Labels (Selected) toggle.

  4. To show/hide labels for unselected items, turn on/off Show Labels (Unselected) toggle.

Changing icon color

To change the icon color for selected and unselected items:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Change the color using the Selected Icon Color and Unselected 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:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Change the icon and text color using the Selected Icon & Text Color and Unselected Icon & Text Color properties.

Changing selected item background color

You can also add the background color around the selected item. Here's how you do it:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Change the color using Selected Background Color property.

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:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Set the color using Border Color property.

  4. Now, find the Border Width property below and enter the value. (e.g., 2,5,10)

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

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

Add Nav Button padding

With Google Nav Bar, the Nav Button (item inside the Nav Bar) looks pretty tiny. 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:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

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:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

To notice the difference, Try adding a border or adding a background color to Nav Bar.

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:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Find the Nav Button Alignment dropdown and select from the options that include Start, Center, End, Space evenly, Space between, and Space around.

Adding space between icon and text

To add space between icon and text:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Find the Gap Between Icon and Text property and enter the value (e.g., 5, 10, 15).

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:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

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

Enabling haptic feedback

When a user taps a navigation bar item, haptic feedback can signal (via vibration) that the tap was registered successfully. This can make the app feel more intuitive and responsive.

To change enable the haptic feedback:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Turn on the Haptic Feedback toggle.

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:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Change the color using the Selected Icon & Text Color property.

  4. Similarly, to change the icon and text color for the unselected items, find the Unselected Icon & Text Color property and change the 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:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Change the color using the Selected Background Color property.

Changing Nav Bar width

You might want to change the default Nav Bar width (i.e., full width) to make the Nav Bar look floating over the page.

To change the NavBar width:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Find the Width property. There are three ways to set width:

    1. To set to an exact size, select PX and enter the desired values.

    2. To set the dimensions as a % of the screen size, select % and enter the desired value.

Add Nav Button padding

Adding a Nav Button Padding creates an empty space around the Nav Button.

To add Nav Button padding:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

To see the space created by entering the padding value, try changing the selected item background color.

Add Nav Button margin

Adding a Nav Button margin creates an empty space around the NavBar.

To add Nav Button margin:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

Changing border radius

Changing Border Radius allows you to adjust the rounded corners of the NavBar and Nav Button.

To change the Border Radius:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. For NavBar, find the Border Radius property and enter the value (e.g., 0,20,5,0).

  4. For Nav Button, find the Button Border Radius property and enter the value.

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

Changing elevation

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

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.

  2. Scroll down to the Styling section.

  3. Find the Elevation property and enter the value.


Reordering Nav Bar items

To reorder the Nav Bar items:

  1. Navigate to the Setting and Integrations > General > NavBar & AppBar > Nav Bar.


Video guide

If you prefer watching a video tutorial, here's the one for you:


Last Updated Date: November 9, 2023

Last updated