FlutterFlow Docs
Search…
Design, Colors & Navigation
You can customize various project settings including the design of some components (like Nav Bar & Activity Indicators), colors used throughout your app, navigation transition, typography, and much more by going to the Setting and Integrations > General page. App assets to be used as the Launcher Icon and the Splash Screen Image can also be set from this page.
Remember, the settings you specify here are accessible and used by the entire app to have a consistent design pattern including colors and typography.
Let's take a closer look at these customization options available under the General tab.

App Assets

In this section, you can upload the image assets to be used by the app. Here, you will be able to select the asset for the App Launcher Icon and the Initial Splash Image.
The image asset that you will upload as the App Launcher Icon will be used as the icon of the app that shows up on the phone's home screen.
The Initial Splash Image shows up when you first launch the app on your phone, by default this image is centered and takes up 50% of the width of the screen. This option will only be visible after you have enabled Authentication (Settings & Integrations -->Authentication).

Initial Page Settings

You can specify the Entry Page and the Logged In Page of your app from this section. Choose the page that you want to use from the dropdown menu.
Entry Page will be loaded if the user is not logged in to your app, this is usually used to display the onboarding flow of the app or to provide the login / sign up page.
Logged In Page will be loaded if the user is already logged in to your app. Users are automatically navigated to the page you specify here on a successful sign in attempt. This option will only be visible after you have enabled Authentication (Settings & Integrations -->Authentication).

Navigation Transition

This option helps you to specify the navigation transition style to be used throughout the app. Click the checkbox present beside Override Default Transition to reveal the dropdown menu for customizing the Transition Type and the field for specifying the Transition Duration.
Though this overrides the default navigation transition style of the entire app, you can still use a different transition style between specific screens by selecting it while defining Actions.

Language Settings

Under Language Settings, you can specify the Default Text Direction for your app. By default, it is set to Left to Right which is used for the English language. You can change it to Right to Left (RTL) if you want to use a language that uses this direction, like Arabic or Hebrew. The language settings will be used by all Text fields in your app.

Nav Bar

If you would like your project to contain a Nav Bar, you will need to enable this by selecting Show Nav Bar. You can set the color of the Nav Bar, choose to show or hide labels, and set the icon colors when the nav bar icon is selected/unselected.
To choose which pages will show on your Nav Bar:
  • Navigate back to the UI Builder and select the page you want to add to the Nav Bar.
  • From the Properties panel, select Show on Nav Bar.
  • Navigate to another page and select Show on Nav Bar. Your Nav Bar will not be visible until you have selected Show on Nav Bar for at least 2 pages.
You can also customize Label, Icon, and Icon Size.

Activity Indicators

You can customize the design of activity indicators (also known as loading indicators) used in the app from this section. From here you can set the Indicator Type, Color and Radius of the activity indicators.

Project Colors

FlutterFlow helps in managing your project color palette from the Project Colors section of this page. By default, the color palette consists of three types of color that you can set: Primary, Secondary & Tertiary.
For adding custom colors to the palette, you can use the Add Color button, choose the color using the color picker or define its Hex value and click Use Selected Color. You can also edit the name of the custom color to give it an appropriate name.
These colors will now be easily available when you go to apply a color within FlutterFlow (e.g. Background Fill Color).

Import A Coolors Color Palette

You can also import a Coolors Color Palette using these steps:
Copy The Coolors Code
  • Navigate to coolors.co and create a color palette.
  • Select the Export icon (
    ).
  • A popup will appear, select the Code icon.
  • Copy the section after /* Object */
It will look something like this: {"Amethyst":"9b5de5","Magenta Crayola":"f15bb5","Minion Yellow":"fee440","Capri":"00bbf9","Sea Green Crayola":"00f5d4"}
Import The Coolors Code Into FlutterFlow
  • Open your project and navigate to Settings and Integrations --> General
  • Scroll down to Project Colors and select Import From Coolors.
  • A popup will appear. Paste the Coolors code into the box on the right side and select Import.

Typography

You can customize the Text Styles used by your project from this Typography section. It lets you customize the following properties of each Style Name:
  • Font Weight - choose the font weight among Thin, Extra Light, Light, Normal, Medium, Semi Bold, Bold, Extra Bold & Black.
  • Font Size - use this field to specify the size of the text.
  • Font Style - checkbox for enabling Italic font style.
  • Color - set the color of the text using either the color picker or by specifying a Hex value.
  • Font Family - click here to open the Google Fonts Picker dialogbox that lets you choose the font family. There are many Google Fonts available, use this link to explore the available font options.
Last modified 1mo ago