Understanding FF UI #22
Conversation
|
|
docs/intro/ff-ui/builder.md
Outdated
|
|
||
| # App Builder | ||
|
|
||
| On opening the project, you'll see the App Builder, which consists of four main sections: Navigation Menu, Toolbar, Canvas, and Properties panel. |
There was a problem hiding this comment.
Why don't you link each of these to their respective sections (not an in page link but to the stand along page)
docs/intro/ff-ui/toolbar.md
Outdated
|
|
||
| From here, you can view the code for your project, connect to GitHub, and also download the source code for your project. | ||
|
|
||
| ## 11.1 View Code |
There was a problem hiding this comment.
11.1 should be one heading level below 11, here both 11 heading is same level as 11.1
docs/intro/ff-ui/toolbar.md
Outdated
|
|
||
| This option lets you display the *Dart* code for all the pages of your FlutterFlow project. You can also take a look at the dependencies being used by the app here. | ||
|
|
||
| ## 11.2 Connect GitHub Repo (Paid Feature) |
| You can use the Preview mode to quickly try out your app on a virtual device without waiting for it to build. This helps you to have a good overview of the navigation and animations you have added to your app. You can also preview your app in the Dark/Light mode and visualize it on various mobile, tablet, and desktop devices. | ||
|
|
||
| This mode has a few limitations; you can't use Firebase or perform API calls in the *Preview* mode. However, the onDoubleTap, onLongPress, and onSubmit works in this mode. | ||
|
|
There was a problem hiding this comment.
Link to the Preview section of How to Test app page from Projects Section
docs/intro/ff-ui/toolbar.md
Outdated
|
|
||
| You can download the entire codebase of the app generated by FlutterFlow using this option. It will download a `.zip` file. You can open the contents using any code editor to make modifications. | ||
|
|
||
| ### 11.4 Download APK (Paid Feature) |
There was a problem hiding this comment.
Add the "Paid Feature" as a note (Admonitions) below.
| # Storyboard | ||
|
|
||
| The Storyboard view allows you to visualize the overall design and navigation of your app. On Storyboard, you can see different screens and user interactions that make up your app. This allows you to see how users will navigate through your app and ensure that the user experience is as intuitive and user-friendly as possible. | ||
|
|
There was a problem hiding this comment.
A little sentence cleanup from ChatGPT:
With so many pages displayed on a storyboard, it may be difficult to identify which routes are coming and where they go from a specific page, especially when lines overlap each other. To highlight the incoming and outgoing routes on a specific page, simply click on the page, and the routes will be highlighted in blue.
docs/intro/ff-ui/canvas.md
Outdated
| width: '100%' | ||
| }}> | ||
| <iframe | ||
| src="https://demo.arcade.software/ViB374dOSglo4Z1afa0o?embed&show_copy_link=true" |
There was a problem hiding this comment.
This is a lot of zoom, specially in terms of zoom size. It's pixelating as you zoom. I think a small video clip in between the slides as you change the language will give an idea to the users that text changed.
And If we want to zoom here, we can do a minimal zoom size change and stay there throughout without moving too much.
docs/intro/ff-ui/builder.md
Outdated
|
|
||
| ## 4. 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. |
There was a problem hiding this comment.
Is there no page for Properties Panel?
There was a problem hiding this comment.
I had added it earlier, but since we are not talking about specific widgets or page properties, I just kept the brief here.
|
|
||
| # Storyboard | ||
|
|
||
| The Storyboard view allows you to visualize the overall design and navigation of your app. On Storyboard, you can see different screens and user interactions that make up your app. This allows you to see how users will navigate through your app and ensure that the user experience is as intuitive and user-friendly as possible. |
There was a problem hiding this comment.
| The Storyboard view allows you to visualize the overall design and navigation of your app. On Storyboard, you can see different screens and user interactions that make up your app. This allows you to see how users will navigate through your app and ensure that the user experience is as intuitive and user-friendly as possible. | |
| With so many pages displayed on a storyboard, it may be difficult to identify which routes are coming and where they go from a specific page, especially when lines overlap each other. To highlight the incoming and outgoing routes on a specific page, simply click on the page, and the routes will be highlighted in blue. |
sidebars.ts
Outdated
| }], | ||
| },{type: 'category', label: "FlutterFlow UI", items: [ | ||
| 'intro/ff-ui/builder', 'intro/ff-ui/navigation-menu','intro/ff-ui/widget-palette','intro/ff-ui/storyboard','intro/ff-ui/toolbar','intro/ff-ui/canvas','intro/ff-ui/resource-hierarchy' | ||
| ]}], |
There was a problem hiding this comment.
I think the hierarchy is wrong here. Its
- Getting Started
- Quickstart
- Before Your Begin
- Understanding the FF UI
But in your case, quickstart, before you begin, ff-ui all are nested within Getting Started.
Please correct this and also you don't have to list pages manually for the non-intro directories. See how the other directories are set up here.
|
Hey @johnbhiggins7 and @PoojaB26 I've addressed all the review comments so far! 🙂 (except a couple of them, for which I have added comments individually). |
docs/intro/ff-ui/canvas.md
Outdated
| --- | ||
|
|
||
| # Canvas | ||
| The Canvas shows the mobile device screen where you can add widgets by dragging and dropping them. You can select, move, and position widgets anywhere on the Canvas. |
There was a problem hiding this comment.
shows the mobile device screen
But its not always mobile device. And can be a web or iPad screens too. Can we rephrase this paragraph?
docs/intro/ff-ui/canvas.md
Outdated
|
|
||
| From here, you can [create a page using AI](#). | ||
|
|
||
| ## 5. Add AppBar |
There was a problem hiding this comment.
In FlutterFlow, we just say App Bar with space, so we can use the same here.
docs/intro/ff-ui/canvas.md
Outdated
|
|
||
| ## 5. Add AppBar | ||
|
|
||
| From here, you can add an [AppBar](#) to your page. Clicking this button opens a popup displaying different [AppBar styles](#) for you to choose from. Just select any AppBar style from the list and it will appear in the Preview Screen. |
There was a problem hiding this comment.
What is the purpose of the hyperlink at AppBar styles?
There was a problem hiding this comment.
To redirect users to a detailed guide on customizing app bar syles like this.
docs/intro/ff-ui/canvas.md
Outdated
|
|
||
| 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. | ||
|
|
||
| :::info |
docs/intro/ff-ui/canvas.md
Outdated
|
|
||
| ## 9. 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. |
There was a problem hiding this comment.
I feel like this part can have a visual, maybe a 2second GIF could work too to show how it resizes.
There was a problem hiding this comment.
Maybe missed the "handle bards" typo.
docs/intro/ff-ui/toolbar.md
Outdated
|
|
||
| ## 11. Developer menu | ||
|
|
||
| From here, you can view the code for your project, connect to GitHub, and also download the source code for your project. |
There was a problem hiding this comment.
maybe a small one line description of what developer menu is like, this allows developers to access developer tools such as ... like in most cases, start with what it is, and then say what you (as devs) can do with it.
docs/intro/ff-ui/storyboard.md
Outdated
|
|
||
| :::info | ||
|
|
||
| Our *Beta* release of Storyboarding is optimized for projects with 30 or fewer pages. |
There was a problem hiding this comment.
Mention that StoryBoard is currently in beta first and what is the limitation after that, and don't use "our", use the, or FlutterFlow's ...
docs/intro/ff-ui/storyboard.md
Outdated
|
|
||
| ## Highlight routes on a page | ||
|
|
||
| With so many pages displayed on a storyboard, it may be difficult to identify which routes are coming and where they go from a specific page, especially when lines overlap each other. To highlight the incoming and outgoing routes on a specific page, simply click on the page, and the routes will be highlighted in blue. |
There was a problem hiding this comment.
Please improve the phrasing here "coming and going" may not sound right
| description: Explore the Resource Hierarchy Overview to understand the correlation between traditional Flutter app components and their equivalents in FlutterFlow. | ||
| --- | ||
|
|
||
| # Resource hierarchy overview |
There was a problem hiding this comment.
I'm a little unsure about this page and it feels like it is directed at Flutter developers more, but anyone else coming to FlutterFlow will be confused about it. I understand this was there in Leigha's talk but that talk was also for Flutter devs so I'm not sure if this fits completely here. We can pick and choose and just talk about the components of a FlutterFlow project/app and not have the comparison with Flutter maybe?
@leigha your thoughts here too please, thanks!
There was a problem hiding this comment.
So the purpose of this page is to just give a brief overview of how Flutter components are translated into FF and then direct users to dedicated pages in our doc to understand more. I agree that it is more targeted towards the Flutter developers, so maybe we can change its location. @leighajarett wdyt?
There was a problem hiding this comment.
Maybe we do the same diagram but without the comparison in this particular page and I'm assuming resource hierarchy would give an understanding of all the resource categories we have under Resources folder. So like Projects, Pages, Widgets etc. So this should be unrelated to Flutter. But when we talk about generated code, we can add a comparison there. (it will come later) And it will mostly be a FlutterFlow to Flutter code comparison rather than Flutter to FlutterFlow. Would that make sense?
There was a problem hiding this comment.
I think if we remove the comparison, keeping the diagram doesn't make sense. Instead, I think we could add a 'Resources' tile on the homepage that redirects users to the resources folder. Also, this page is crucial for anyone transitioning from Flutter, we could move it to a more appropriate location.
There was a problem hiding this comment.
Sorry I meant that we can have a diagram only for the resources hierarchy of FlutterFlow project, so just removing the Flutter terms from the diagram and keeping the FlutterFlow terms.
My suggestion to cater to both Flutter + FlutterFlow is to do the following flow:
- Show diagram with just FlutterFlow terms and 2 line explanations of the resource hierarchy -- Projects, Page, etc.
- Next heading section "Flutter to FlutterFlow" talks about "if you are coming from Flutter...then.." And this section shows the original diagram and the comparisons.
Wdyt?
There was a problem hiding this comment.
Got it. Updated accordingly. Thanks.
| description: Explore the App Builder in FlutterFlow, featuring a comprehensive interface with four main sections. Navigation Menu, Toolbar, Canvas, and Properties Panel. | ||
| --- | ||
|
|
||
| # App Builder |
There was a problem hiding this comment.
Overall comment: Can we fix the sidebar positions of the pages and drop them in order? Use front matter to modify positioning.
|
Hey @pinkeshmars did a longer review and left some comments on the PR, mostly its around the empty points and headers which are just one line mentions and dont have a huge significance. Suggested some ways to shorten the pages and remove white spaces and empty sections. Thank you!! |
|
Hey @PoojaB26, this is ready for review! Most of the review comments are addressed except a few for which I have left comments🙂. |
There was a problem hiding this comment.
Hey @pinkeshmars overall this is great! have made some small suggestions and requested few small changes. You can make those changes and merge this PR, I'm approving it!
| 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 | ||
| --- | ||
|
|
There was a problem hiding this comment.
We can remove the numberings from the headers as the image doesnt have numbering anymore.
docs/intro/ff-ui/canvas.md
Outdated
|
|
||
| ## 8. Display Device | ||
|
|
||
| You can use this to show the device frame in the preview. This might come in handy if you want to visualize better or capture the user interface on a particular device. |
There was a problem hiding this comment.
Add a small note that this is useful when checking your screen with safe area or how it will look with iPhone or Android notches etc (you can frame it better)
docs/intro/ff-ui/canvas.md
Outdated
|
|
||
| ## 9. 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. |
There was a problem hiding this comment.
Maybe missed the "handle bards" typo.
|
|
||
| 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. | ||
|
|
||
|  |
There was a problem hiding this comment.
Thank you for redoing the graphic again! Love it!
Also lets remove the numbering from the headers since the image doesnt have it anymore.
docs/intro/ff-ui/builder.md
Outdated
|
|
||
| ## 3. Canvas Area {#canvas-area} | ||
|
|
||
| In the [Canvas Area](canvas), you can see a preview of your mobile device's screen and build your app page. |
There was a problem hiding this comment.
It isnt just mobile, please fix this!
docs/intro/ff-ui/widget-palette.md
Outdated
|
|
||
| ## 4. Theme Widgets | ||
|
|
||
| Theme Widgets allow you to customize the visual appearance of a single widget and then reuse it throughout the app. Once you [create a theme widget](#), you can access it from here. |
There was a problem hiding this comment.
Maybe rephrase this and mention a bit that they are part of the design system and helps you build widgets based on your theme etc. With this definition, its not very clear the diff between components and theme widgets.
docs/intro/ff-ui/widget-palette.md
Outdated
|
|
||
| ## 5. Floating Widget Palette | ||
|
|
||
| The floating widget palette gives you quick access to widgets directly from the canvas. This feature is useful for swiftly adding widgets without the need to open the widget palette via the navigation menu. |
There was a problem hiding this comment.
| The floating widget palette gives you quick access to widgets directly from the canvas. This feature is useful for swiftly adding widgets without the need to open the widget palette via the navigation menu. | |
| The Floating Widget Palette gives you quick access to widgets directly from the canvas. This feature is useful for swiftly adding widgets without the need to open the widget palette via the navigation menu. |
docs/intro/ff-ui/widget-palette.md
Outdated
|
|
||
| ## 5. Floating Widget Palette | ||
|
|
||
| The floating widget palette gives you quick access to widgets directly from the canvas. This feature is useful for swiftly adding widgets without the need to open the widget palette via the navigation menu. |
There was a problem hiding this comment.
A GIF would be useful here if we are not explaining it anywhere else.
| 1. **MyApp to Project**: In Flutter, `MyApp` typically represents the root of your application, where you set up routes and other global configurations. In FlutterFlow, the equivalent is the "Project," which encompasses the entire application you are building, including its configurations and settings. Learn more about creating a project [here](../../resources/Projects/how-to-create-find-organize-projects#how-to-create-a-project). | ||
| 2. **MyPage to Page**: `MyPage` in Flutter represents a specific screen in the app. Similarly, In FlutterFlow, each "Page" corresponds to a screen, where you build the layout and functionality specific to that page of the project. Learn more about pages in FlutterFlow [here](../../resources/ui-building-blocks/pages/getting-started#creating-a-page). | ||
| 3. **Column, Button, Text to Built-in widgets**: In FlutterFlow, widgets are categorized under "Built-in widgets," which users can drag and drop onto their canvas to build the UI. Learn more about widgets [here](../../resources/ui-building-blocks/overview#widgets). | ||
| 4. **Custom widget to Component**: `CustomWidget` in Flutter indicates user-created widgets that serve specific functions not covered by built-in widgets. FlutterFlow translates this into "Component" allowing you to create and use custom components within your projects. Learn more about creating a component [here](#). |
There was a problem hiding this comment.
| 4. **Custom widget to Component**: `CustomWidget` in Flutter indicates user-created widgets that serve specific functions not covered by built-in widgets. FlutterFlow translates this into "Component" allowing you to create and use custom components within your projects. Learn more about creating a component [here](#). | |
| 4. **Custom widget to Component**: `CustomWidget` in Flutter indicates user-defined widgets that serve specific functions not covered by built-in widgets. FlutterFlow translates this into "Component" allowing you to create and use custom components within your projects. Learn more about creating a component [here](#). |
| --- | ||
|
|
||
| # Resource hierarchy overview | ||
|
|
There was a problem hiding this comment.
Love this page! Thanks for making the changes
Description
Understanding FF UI
Linear ticket and magic word Fixes DEVR-314
Type of change