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

1. Device Selector

You can change the size of the preview screen to match the selected device screen dimensions, this helps in visualizing how the app will look on that particular screen size.
Select among the following preset devices:
If the device that you need is not present in this list, then you can click on the Canvas Size displayed on the Tool Bar and enter a custom size.

2. 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 the user interface on a particular device.

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

4. 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.
You can learn know more about these customization options from the Add Widgets page.

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

6. 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.
Last modified 1mo ago