Skip to main content

Canvas

The Canvas shows the selected device screen, such as mobile, tablet, web, or desktop. It allows you to add widgets via drag-and-drop. You can select, move, and position widgets anywhere on the Canvas.

The Canvas also includes zoom controls, light and dark previews, multi-language preview, App Bar and Nav Bar controls, text size simulation, and more.

Show or Hide Navigation Menu​

From here, you can open or close the Navigation Menu.

Zoom Controls​

There are zoom in (+) and zoom out (-) buttons to control the zoom level of the Canvas. While working on complex UI designs, this comes in handy when you want to zoom in on a specific area or zoom out for an overview.

Next to the zoom buttons, click Fit device to canvas to zoom so the whole device fits in the Canvas. While this toggle is on, the zoom label reads Fit, and the device stays fitted when you change the device, its orientation, or its posture, or when you resize the window. To turn it off, click the toggle again.

Preview Screen​

The Preview Screen is where you build the UI for the selected device. You can customize the screen by adding widgets using drag and drop from the Widget Palette and by applying properties from the Properties Panel.

Set Preview Screen Size​

Use the device picker at the top of the Canvas, after the zoom controls, to preview your app at different dimensions. The picker shows the name of the selected device and its screen resolution in physical pixels. Click it to open a menu of devices, and then select one to test how your layout responds at that screen size.

The menu includes the following:

  • Search devices...: Type to filter the list. Each word you type must match the device name, brand, year, or size, so pixel 9 pro lists only matching Pixel devices. Use the arrow keys to move through the list.
  • Frequently used: The devices you select most often. To remove a device from this section, hover over it and click the remove button. The device remains available in its device category.
  • Phones, Foldables, Tablets, and Desktop: Devices grouped by type, with the newest devices listed first. The devices include recent iPhones, Pixels, and Galaxy foldables, and the iPhone Duo.
  • Custom size (px): Enter the desired width and height, and then click Apply.

Next to the device picker are the following controls:

  • Rotate to landscape or Rotate to portrait: Rotates the preview. This button isn't available for desktop devices or when you edit a component.
  • Closed, Half-open, and Open: For a foldable device, switch between folded, half-open, and open states. Half-open appears only when that state differs visually from Open, such as on the iPhone Duo.

The device frame shows the device's side buttons, camera cutout, and safe areas. A custom size has no device frame.

Add App Bar​

From here, you can add an App Bar to your page. Clicking this button opens a popup displaying different App Bar styles for you to choose from. Select an App Bar style from the list, and it will appear in the Preview Screen.

Save Screenshot​

Click the Save Screenshot camera icon beside the Preview Screen to save an image of the current preview.

Designer Import/Export​

Use this menu to copy screens between FlutterFlow and FlutterFlow Designer.

  • Export to Designer: Copy pages from your FlutterFlow project into Designer, where you can explore new styles and continue refining the layouts. See Import from FlutterFlow for detailed instructions.
  • Paste from Designer: Copy designs from Designer into your FlutterFlow project. In Designer, use Export to FlutterFlow to copy the frames, then select Paste from Designer on the Canvas. See Export from Designer for more information.

Dark/Light Mode​

Use this toggle to switch your app preview between light and dark mode, so you can ensure your design looks great in both modes. This feature is only available if you've enabled dark mode support in your project.

Builder Settings​

Builder Settings let you adjust how the FlutterFlow builder, Canvas, preview screen, and Property Panel behave while you design.

Platform Settings​

Set Builder to Dark Mode​

Use this option to switch the FlutterFlow builder between light and dark mode. This changes the appearance of the FlutterFlow platform, not the theme of your app.

Canvas Settings​

Enable Snapping​

Enable snapping to make widget width and height snap to multiples of the specified value while resizing. This helps keep widget sizes consistent as you adjust layouts on the Canvas.

Show Resize Bars​

Show resize bars to display handles on the right and bottom sides of the preview screen. You can use them to resize the preview screen to a custom size and test how your layout responds at different screen sizes.

Set Canvas Color​

Use this option to change the background color of the Canvas. This can be helpful when creating components or previewing widgets against a different page background. For example, if a component uses dark text, setting a lighter canvas color can make it easier to see while designing.

Device Preview Settings​

Show Safe Area​

Enable this option to show the device safe area in the builder. Safe areas help you preview where content may be affected by device notches, rounded corners, status bars, or other screen insets.

note

If the device bezel is displayed, the safe area is always enabled in the preview.

Adjust Text Sizing​

Use this option to preview your app with different text scale settings. This helps you test how your UI responds when users increase text size from their device accessibility settings.

Display Keyboard​

Enable this option to show the keyboard on the preview screen. This is useful for checking how form fields, buttons, and bottom-aligned content appear when the keyboard is open.

Display Device Bezel​

Use this option to show the device frame in the preview. This is particularly useful for checking how your screen will look with device-specific features such as the safe area or notches on iPhones and Android devices.

Show System UI​

Enable this option to show the device's status bar and navigation bar in the preview, inside the device bezel. The bars use the page's app bar color and adapt to the preview's light or dark mode.

This option is available only in Page View when Display Device Bezel is on and a predefined device, such as an iPhone, is selected. Show System UI is off by default.

Show Overflows​

Enable this option to show overflow errors in the builder as they will appear in Test Mode. This can help you catch layout issues before running or testing your app.

Display Language​

If you've enabled multi-language support for your project, you can use this to preview your app in different languages. Open Canvas Settings and change the Display Language to preview the translated text in your app.

tip

This feature is valuable for testing your app across multiple locales without needing to run your app.

Property Panel Settings​

Keep Common Properties Collapsed​

Enable this option to keep common sections in the Property Panel collapsed by default, such as Visibility, Padding, and Alignment. This can make the Property Panel easier to scan when you only want to open the sections you need.

Add Nav Bar​

Use this button to add the Nav Bar to your page. Clicking it opens a popup where you can enable the Nav Bar for your project. Once the Nav Bar is enabled, you can customize it to match your design.

Video Guide​

Watch this video if you prefer watching a video tutorial.