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 while building your app's layout.
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. You can modify the canvas size by choosing from the list of different preset device sizes (or, specify a custom size), show or hide the device frame and keyboard, and adjust the zoom level.

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 also have some other tabs for specifying Actions (like 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 test your entire app by running or previewing. 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.
Last modified 2mo ago