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
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
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.
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
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.
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.
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
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
If you prefer watching a video tutorial, here's the one for you:
Last Updated Date: December 6, 2023
Last modified 1d ago