Merge pull request #22 from FlutterFlow/pinkesh/ff-ui

Understanding FF UI

Author: pinkeshmars

docs/intro/ff-ui/builder.md

@@ -0,0 +1,47 @@
+---
+slug: builder
+title: App Builder
+tags: []
+description: Explore the App Builder in FlutterFlow, featuring a comprehensive interface with four main sections. Navigation Menu, Toolbar, Canvas, and Properties Panel.
+sidebar_position: 0
+---
+
+# App Builder
+
+On opening the project, you'll see the App Builder, which consists of four main sections: [Navigation Menu](#navigation-menu), [Toolbar](#toolbar), [Canvas](#canvas-area), and [Properties panel](#properties-panel).
+
+![app-builder](imgs/builder.avif)
+
+## Navigation Menu {#navigation-menu}
+
+The Navigation Menu, located on the left side of the builder, allows you to switch between various FlutterFlow features. These include designing the UI, managing databases, setting up API, adjusting app settings, adding integrations, and more.
+
+Here is a list of all the features accessible from the navigation menu:
+
+1. **Dashboard**: Manage projects, access account info, and FlutterFlow resources.
+2. **Widget Palette**: Access all widgets for your app.
+3. **Page Selector**: Manage pages and components, create folders as needed.
+4. **Widget Tree**: Get an overview of all widgets on a selected page.
+5. **Storyboard**: Visualize app's design and navigation.
+6. **Firestore**: Create collections and adjust Firestore-related settings.
+7. **Data Types**: Create custom data types for your app.
+8. **App Values**: Manage App State variables and Constants.
+9. **API Calls**: Define API calls.
+10. **Media Assets**: Upload assets for your app and team.
+11. **Custom Functions**: Add custom functionalities, widgets, and actions.
+12. **Cloud Functions**: Write and deploy cloud functions for Firebase.
+13. **Tests**: Add automated tests.
+14. **Theme settings**: Customize visual appearance.
+15. **Settings and Integrations**: Access app-related settings and integrations.
+
+## ToolBar {#toolbar}
+
+From [ToolBar](toolbar), you can search for project resources, change canvas size, see project history, branching, optimization and enhancements, view-download code, and run your app.
+
+## Canvas Area {#canvas-area}
+
+In the [Canvas Area](canvas), you can see a preview of a device's screen and build your app page.
+
+## Properties Panel {#properties-panel}
+
+The Properties Panel lets you modify both the visual appearance and interactive behavior of UI elements on the canvas. It allows you to add [Actions](#), set up a [Backend Query](#), add [Animations](#) and more.

docs/intro/ff-ui/canvas.md

@@ -0,0 +1,144 @@
+---
+slug: canvas
+title: Canvas
+tags: []
+description: Dive into the versatile Canvas in FlutterFlow, where you can effortlessly design and preview your app’s interface.
+sidebar_position: 2
+---
+
+# 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.
+
+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.
+
+![canvas area](imgs/canvas-new.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](#) and by applying properties present in the [Properties Panel](#).
+
+## Show or hide Navigation Menu
+
+From here, you can open or close the [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.
+
+## AI Generated Page
+
+From here, you can [create a page using AI](#).
+
+## 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. Just select any App Bar style from the list and it will appear in the Preview Screen.
+
+![AddAppBar.avif](imgs/AddAppBar.avif)
+
+## Multi-Language Preview
+
+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.
+
+:::tip
+This feature is valuable for testing your app across multiple locales without needing to run your app.
+:::
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/E6otMpbcKewMYCfkjl9d?embed&show_copy_link=true"
+        title="Sharing a Project with a User"
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+
+## Dark/Light Mode
+
+This toggle lets you switch between light and dark mode in your app, allowing you to ensure your design looks great in both modes. This feature is only available if you've enabled dark mode support in your project.
+
+## Display Device
+
+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
+
+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.
+
+![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
+
+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
+
+When resizing a widget, you can snap its size to the specific pixel values or a percentage of the screen size.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/1IOtwXpNus8W4dLgdHsm?embed&show_copy_link=true"
+        title="Sharing a Project with a User"
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+
+### Change canvas color
+Changing the canvas color can be helpful when creating components, especially when you want to preview them against the background color of the page. For example, if you have a text component that is black or dark-colored, and the default background is also dark, changing the canvas color to a lighter shade can improve visibility and make the design process easier.
+
+## Add Nav Bar
+
+This button allows you to add the [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.
+
+![AddNavBar.avif](imgs/AddNavBar.avif)
+
+---
+
+## Video guide
+
+Watch this video if you prefer watching a video tutorial.
+<div class="video-container"><iframe width="760" height="428" src="https://www.youtube.com/embed/NDrte4nOXYc" title="The Canvas | FlutterFlow University" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+
+---