diff --git a/docs/intro/ff-ui/canvas.md b/docs/intro/ff-ui/canvas.md index ef52f58c..4a1d1cde 100644 --- a/docs/intro/ff-ui/canvas.md +++ b/docs/intro/ff-ui/canvas.md @@ -7,43 +7,90 @@ sidebar_position: 2 keywords: [Canvas, FlutterFlow, UI, Design] --- -# Canvas -The Canvas shows the screen of the device, which could be mobile, iPad, web, or desktop. It allows you to add widgets via drag-and-drop. You can select, move, and position widgets anywhere on the Canvas. +# 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. -It allows zoom level adjustments and previews in light or dark mode. It also includes features for multi-language preview, adding App Bar and Nav Bar, simulating larger font visualization, and more. +The Canvas also includes zoom controls, light and dark previews, multi-language preview, App Bar and Nav Bar controls, text size simulation, and more. -![canvas area](imgs/canvas-new.avif) +![canvas area](imgs/canvas.avif) -## 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 Palette](../../intro/ff-ui/widget-palette.md) and by applying properties present in the [Properties Panel](../../intro/ff-ui/builder.md#properties-panel). -## Show or hide Navigation Menu +## Show or Hide Navigation Menu From here, you can open or close the [Navigation Menu](../../../docs/intro/ff-ui/builder.md#navigation-menu). ## 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. +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. + + +## Preview Screen -## AI Generated Page +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](../../intro/ff-ui/widget-palette.md) and by applying properties from the [Properties Panel](../../intro/ff-ui/builder.md#properties-panel). -From here, you can [create a page using AI](../../resources/ui/pages/intro-pages.md#generate-with-designer). +## Set Preview Screen Size + +Use the screen size controls at the top of the Canvas to preview your app at different dimensions. Select the mobile, tablet, or desktop icon to switch between device types and test how your layout responds on each screen size. + +You can also set a custom preview size by clicking the current size box, entering the desired **Width (px)** and **Height (px)** values, and then clicking **Save**. + + +
+ +
+

## Add App Bar -From here, you can add an [App Bar](../../resources/ui/pages/page-elements.md#appbar) to your page. Clicking this button opens a popup displaying different App Bar styles for you to choose from. Just select any App Bar style from the list and it will appear in the Preview Screen. +From here, you can add an [App Bar](../../resources/ui/pages/page-elements.md#appbar) 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. -![AddAppBar.avif](imgs/AddAppBar.avif) +![appbar-style.avif](imgs/appbar-style.avif) -## Multi-Language Preview +## Designer Import/Export -If you've enabled the multi-language feature for your project, you can use this to preview your app in different languages. Just select the language from the dropdown menu, and the text in your app will be translated accordingly. +Use this menu to copy screens between FlutterFlow and FlutterFlow Designer. -:::tip -This feature is valuable for testing your app across multiple locales without needing to run your app. -::: +- **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](../../ff-designer/import-export/import.md) 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](../../ff-designer/import-export/export.md#export-options) 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. + +![builder-settings](imgs/builder-settings.avif) + +### 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.
+
-You can use this 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. -## Handle Bars +#### Show Resize Bars -Enabling the Resize Handle Bars will show the handle bars 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. +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. ![handle-bars](imgs/handle-bars.gif) -## Show or Hide Keyboard -This option, when enabled, displays a virtual keyboard on the device preview screen. This is particularly useful for visualizing the user interface with the keyboard displayed. -## Larger Font Visualization +#### 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. +::: -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. -## Canvas Settings -![canvas-settings](imgs/canvas-settings.avif) -### Safe Area -The Safe Area is a concept in mobile design that prevents content from being obscured by physical features of the device, such as camera notches, sensors, or rounded display edges. In this context, the FlutterFlow offers a Safe Area switch which allows you to enable or disable this feature as needed. +
+ +
-### Resize Snapping +#### Adjust Text Sizing -When resizing a widget, you can snap its size to the specific pixel values or a percentage of the screen size. +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 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 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 -This button allows you to add the [Nav Bar](../../resources/ui/pages/page-elements.md#nav-bar) to your page. Clicking on this button opens the popup that allows you to enable Nav Bar for your project. Once the Nav Bar is enabled, you can customize it to match your design. +Use this button to add the [Nav Bar](../../resources/ui/pages/page-elements.md#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. -![AddNavBar.avif](imgs/AddNavBar.avif) +![add-navbar.avif](imgs/add-navbar.avif) ---- -## Video guide +## Video Guide Watch this video if you prefer watching a video tutorial.
- ---- diff --git a/docs/intro/ff-ui/imgs/CanvasArea.avif b/docs/intro/ff-ui/imgs/CanvasArea.avif deleted file mode 100644 index ee1d00d0..00000000 Binary files a/docs/intro/ff-ui/imgs/CanvasArea.avif and /dev/null differ diff --git a/docs/intro/ff-ui/imgs/add-navbar.avif b/docs/intro/ff-ui/imgs/add-navbar.avif new file mode 100644 index 00000000..0dc300e0 Binary files /dev/null and b/docs/intro/ff-ui/imgs/add-navbar.avif differ diff --git a/docs/intro/ff-ui/imgs/appbar-style.avif b/docs/intro/ff-ui/imgs/appbar-style.avif new file mode 100644 index 00000000..6bca1d20 Binary files /dev/null and b/docs/intro/ff-ui/imgs/appbar-style.avif differ diff --git a/docs/intro/ff-ui/imgs/builder-settings.avif b/docs/intro/ff-ui/imgs/builder-settings.avif new file mode 100644 index 00000000..c2008beb Binary files /dev/null and b/docs/intro/ff-ui/imgs/builder-settings.avif differ diff --git a/docs/intro/ff-ui/imgs/canvas-new.avif b/docs/intro/ff-ui/imgs/canvas-new.avif deleted file mode 100644 index 27047f62..00000000 Binary files a/docs/intro/ff-ui/imgs/canvas-new.avif and /dev/null differ diff --git a/docs/intro/ff-ui/imgs/canvas.avif b/docs/intro/ff-ui/imgs/canvas.avif new file mode 100644 index 00000000..326614f1 Binary files /dev/null and b/docs/intro/ff-ui/imgs/canvas.avif differ