FlutterFlow Docs
Search…
Canvas Area
The Canvas Area displays a preview of the mobile device screen along with some options to customize the preview.

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 Widget Panel, and by applying properties present in the Properties Panel.

2. Keyboard Shortcuts

Clicking on this button brings up the Keyboard Shortcuts panel on the right side of the canvas area. Here, you get to know the shortcuts that can be used inside FlutterFlow which helps you to iterate over the user interface designs even faster.

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.

4. 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.

5. 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.

6. 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.

7. Display Device

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

8. 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.

9. Display Keyboard

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.

10. 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 the NavBar for your project. Once the NavBar is enabled, you can customize it to match your design.