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
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.
Show or hide the navigation menu
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.
.gif?alt=media&token=25021c0b-fb89-4538-8a36-7ddc5ff47691)
Zoom Controls
The Floating Widget Palette gives you access to all widgets in FlutterFlow. It is essentially a duplicate of the UI Builder but can be kept open as a floating window. You can drag and adjust its position as you like. This is helpful when you want to add a new widget while keeping the widget tree or page selection menu open, making it convenient for multitasking.
Floating Widget Palette
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.
.gif?alt=media&token=4af8fa4b-1af9-42e1-8dca-65a587d59764)
Add AppBar
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.
.gif?alt=media&token=8456da2f-2948-44ca-827d-68389b2df4e3)
Multi-Language Preview
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.
.gif?alt=media&token=13f14783-b262-4946-9ceb-67dda1ef7e24)
Dark/Light Mode
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.
.gif?alt=media&token=3af1f7f6-31d7-404c-b47a-1f93fe408f9e)
Display Device
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.
.gif?alt=media&token=ece906bb-7ff6-4b29-b622-4578fdf0fc66)
Display Resize Handle Bars
Enabling this option opens up the keyboard on the device preview screen; this helps in visualizing the user interface with the keyboard displayed. Opening up the keyboard usually pushes the contents of the screen upwards.
.gif?alt=media&token=e7e6d2ad-89d7-42c4-984b-9eab117fbbb2)
Display Keyboard
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.
.gif?alt=media&token=28dfb413-eb1b-4d6d-bac8-abea03d0ecd7)
Add NavBar
Last modified 1mo ago