FlutterFlow Docs

UI Builder

On FlutterFlow, you can build and customize your application from the UI Builder page. This page consists of all the UI elements (also known as widgets) that you can use for building your app's layout.
UI Builder
FlutterFlow does not have scroll bars. Instead, just hover over the section and scroll like you normally would with your mouse or trackpad.
To get you familiarized with the UI Builder page, we have divided it into four main sections.

1. Canvas Area

The Canvas Area displays the mobile device screen where you can add elements by dragging and dropping them onto the canvas. The Canvas area allows you to see keyboard shortcuts, show or hide the device frame and on-screen keyboard. You can also adjust the zoom level and resize the device screen to check the responsiveness of your app. On enabling the Multi-language and dark mode support, the canvas area also displays an option to change the language and theme (dark/light mode) of your app.

2. Widget Panel

You will find all the user interface elements or components in the Widget Panel. These can be added to the canvas using the drag and drop method. There's also a search bar to quickly search for any widget.

3. Properties Panel

The Properties Panel allows you to customize the selected widget by modifying the Properties like visibility, padding, alignment, and various widget-specific properties (e.g. Label Text of a TextField widget). You can also access some other tabs for specifying Actions (e.g. onTap and onSubmit), setting Query Type (for any API call or Firebase document reference), and adding Animations to the selected widget.

4. Tool Bar

The Tool Bar contains some helpful information like the Canvas Size and a Project issues button which displays any issues caused by your project layout or configuration. You will also find buttons here to save the current version of your app and test your entire app by running or previewing it. You can also view/download the app's Dart code from the Developer Menu. The Add page button allows you to quickly add a new page to your application.