Comment on page

Canvas Area

The Canvas Area displays the mobile device screen where you can add widgets by dragging and dropping them onto the canvas. It has buttons to adjust the zoom level, and canvas size, open the floating widget palette, and see your app in light/dark mode.
Also, you can preview how your app will look when the keyboard is open. When the multi-language feature is enabled, you can see a dropdown to change the language and see how your app looks in different languages.
Canvas Area

1. Preview Screen

This is the canvas of the device screen where you can build the user interface. You can customize the screen by adding widgets using drag and drop from the UI builder and by applying properties present in the Properties Panel.

2. Show or hide Navigation Menu

Using this button, you can open or close the Navigation Menu.
Show or hide the navigation menu

3. Zoom Controls

There's a zoom in ( + ) and a zoom out ( - ) button to control the zoom level of the canvas. While working on complex user interface designs, this comes in handy to give you a better preview of the widgets by zooming in to a particular area and then zooming out to have an overview.
Zoom Controls

4. Add page, component, or widget

If you prefer to keep the widget tree always closed, you can use this menu to quickly add a new page, component, or widget. If you select a widget, you'll see a 'Floating Widget Palette' allowing you to access all widgets in FlutterFlow. It is essentially a duplicate of the UI Builder but can be kept open as a floating window.

5. AI Generated Page

From here, you can create a page using AI.

6. Add AppBar

This button allows you to add the AppBar to your page. Clicking on this button opens the popup that shows different AppBar styles you can add to your page. Simply click on any AppBar Style from the list, and the AppBar will be shown inside the Preview Screen.
Add AppBar

7. Multi-Language Preview

You can preview all your app's text in different languages on the canvas using the multi-language dropdown menu. The dropdown menu shows the list of supported languages with the country flag, and when you change the language, the translated text appears on the canvas. This becomes really helpful in testing your app design with translated text without having you run your app.
This option is only available if you have enabled multi-language support for your project.
Multi-Language Preview

8. Dark/Light Mode

You can use the Dark/Light mode toggle icon to preview the Dark or Light theme of your app. Switching to Dark or Light mode will show your app widgets and components as per the colors set in the dark or light mode theme.
This option is only available if you have enabled Dark Mode theme support for your project.
Dark/Light Mode

9. Display Device

You can use this to show the device frame in the preview. This might come in handy if you want to visualize better or capture the user interface on a particular device.
Display Device

10. Display Resize Handle Bars

Enabling the Resize Handle Bars will show the handle bards at the right and bottom sides of the preview screen. This allows you to change the size of the preview screen to better test your app on a screen with a custom resolution and the overall responsiveness of your app.
Display Resize Handle Bars

11. Larger Font Visualization

This enables you to simulate how your app appears when users adjust text scale or accessibility settings on their devices. It's vital for developing an app that's visually appealing and also accessible, especially for those requiring larger text sizes.

12. Canvas Settings

12.1 Safe Area

When safe area is enabled, it ensures that content isn't hidden behind physical features like camera notches, sensors, or rounded edges of the display. You can enable or disable it using the Safe Area switch.

12.2 Resize Snapping

When resizing a widget, you can snap its size to the specific pixel values or a percentage of the screen size. By default, it is set to 1 px. To change this, click here, ensure Resize Snapping is enabled, and enter the pixel or percentage value.
Resize snapping

13. Add NavBar

This button allows you to add the NavBar to your page. Clicking on this button opens the popup that allows you to enable NavBar for your project. Once the NavBar is enabled, you can customize it to match your design.
Add NavBar

Video guide

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

Last Updated Date: December 6, 2023