You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Explore the Resource Hierarchy Overview to understand the correlation between traditional Flutter app components and their equivalents in FlutterFlow.
This guide aims to help you understand the structure and elements of a typical FlutterFlow project. It will walk you through some important parts of the app, from the overall project down to individual design elements, explaining their purpose and how they relate to traditional Flutter app components.
14
14
@@ -34,4 +34,54 @@ If you are coming from Flutter, it is beneficial for you to understand the Flutt
34
34
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/pages/intro-pages.md#creating-a-page).
35
35
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/overview.md#widgets).
36
36
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](../../resources/ui/components/intro-components.md).
37
-
5.**Theme/style constants to Design System**: In Flutter, theme and style constants are used to ensure consistent styling across an app. FlutterFlow uses a "Design System" to manage and apply uniform styles and themes throughout the application. Learn more about design system [here](../../ff-concepts/design-system/design-system.md).
37
+
5.**Theme/style constants to Design System**: In Flutter, theme and style constants are used to ensure consistent styling across an app. FlutterFlow uses a "Design System" to manage and apply uniform styles and themes throughout the application. Learn more about design system [here](../../ff-concepts/design-system/design-system.md).
38
+
39
+
## Resource Description
40
+
41
+
A Resource Description is a brief text note that explains the purpose, usage, or key details of a particular resource. By supplying clear, concise descriptions, you create better project documentation and a smoother development experience—both for yourself and any collaborators.
42
+
43
+
:::info
44
+
Here are some reasons why resource descriptions can be helpful:
45
+
-**Team Collaboration**: When multiple developers or designers work on the same project, concise descriptions help everyone understand each element’s role without guesswork.
46
+
-**Better Search**: Descriptions are indexed in the FlutterFlow search. This helps locate pages, components, and other resources quickly, especially in large projects.
47
+
-**Project Documentation**: Acts as built-in documentation of your app, which makes future updates easier.
48
+
:::
49
+
50
+
You can add a description for each of the following resources in FlutterFlow:
51
+
52
+
-**Project**: Use the project-level description to summarize the overall goals or scope of your app. For instance, "A delivery management app for small businesses" helps keep the team aligned on the primary objective.
53
+
-**Page**: Explains a page’s main function. Example: "Displays the user’s shopping cart and checkout options."
54
+
-**Component**: Clarifies the functionality or design intention of a reusable component. Example: "Reusable card component to be used as ListTile."
55
+
-**Action Blocks**: Provide a concise description of what the set of actions does (e.g., "Sends a notification to the user’s email address upon form submission").
56
+
-**Custom Functions**: Describe the logic or purpose behind the function. Example: "Calculates shipping costs based on weight and distance."
57
+
-**Custom Actions**: Specify the custom behavior you’ve created, such as "Opens a QR scanner and returns the scanned value."
58
+
-**Custom Widgets**: Explain the widget’s purpose or structure. Example: "Carousel widget for displaying multiple images with pagination."
59
+
-**Data Type**: Summarizes the purpose of a custom data model. Example: "Represents a user’s order including items, total cost, and status."
60
+
-**Parameters**: Provide context for how a parameter is used, including expected data types or value ranges. Example: "String to store the user’s phone number—must include country code."
61
+
-**Page/Component State Variables**: Clarify what state data is being stored and why. For instance, "Tracks the currently selected tab in this component."
62
+
-**App State Variables**: Describe the global data shared across pages. Example: "Stores the user’s authentication token for all network requests".
63
+
-**Constant**: Add the intended purpose of any fixed value used throughout the app. Example: "Base API URL for all network calls".
64
+
-**Enum**: Provide a rationale for the enumerated values. Example: "Defines possible user roles—admin, editor, viewer".
65
+
-**Firestore Collection**: Explain what data the collection holds and how it relates to your app’s functionality. Example: "Stores all user profiles with fields for name, email, and profile photo URL".
66
+
67
+
In FlutterFlow, you can read descriptions as tooltips when hovering over the green note icon.
68
+
69
+
:::tip
70
+
71
+
In the generated code, FlutterFlow inserts descriptions as docstring-like comments near the relevant classes, methods, or properties. For instance, a data type named `OrderInfo` with a description of “Represents a user’s order, including items, total cost, and status” will have that text added above the class declaration:
72
+
73
+
```jsx
74
+
/// Represents a user’s order, including items, total cost, and status.
75
+
class OrderInfo {
76
+
/// The total price in USD for this order.
77
+
double totalAmount;
78
+
List<String> items;
79
+
// ...
80
+
}
81
+
```
82
+
83
+
In a standard IDE (e.g., VS Code or Android Studio), if you place your mouse over a custom data type class name, the description set in FlutterFlow appears as a tooltip, helping you quickly grasp the purpose of a resource.
0 commit comments