diff --git a/docs/resources/data-representation/constants.md b/docs/resources/data-representation/constants.md index a2d1c151..2e46cecb 100644 --- a/docs/resources/data-representation/constants.md +++ b/docs/resources/data-representation/constants.md @@ -42,4 +42,8 @@ Constants don't change. Once you set its value (in builder), you can't change it allowFullScreen allow="clipboard-write"> - \ No newline at end of file + + +:::tip[Naming Convention] +Prefer using a lowercase `k` prefix for constants to indicate their immutability, especially for project-specific constants. This approach is more concise and aligns with Dart's common practices. To learn more, refer to the guide on **[Naming Variables & Functions](../../resources/style-guide.md)**. +::: diff --git a/docs/resources/data-representation/custom-data-types.md b/docs/resources/data-representation/custom-data-types.md index 1aa647cb..d0e1146f 100644 --- a/docs/resources/data-representation/custom-data-types.md +++ b/docs/resources/data-representation/custom-data-types.md @@ -62,6 +62,10 @@ To create a custom data type, specify its name and the corresponding fields. Eac +:::tip[Naming Convention] +When naming custom data types, always use **UpperCamelCase**, as recommended by the Dart Style Guide. To learn more, refer to the guide on **[Naming Variables & Functions](../../resources/style-guide.md)**. +::: + ## Accessing Custom Data Type After creating the custom data type, you can use it to create variables, such as an app state variable, and then access them. Here's an [example](app-state.md#app-state-variables). diff --git a/docs/resources/data-representation/data-types.md b/docs/resources/data-representation/data-types.md index 053b92a2..e9a87d8c 100644 --- a/docs/resources/data-representation/data-types.md +++ b/docs/resources/data-representation/data-types.md @@ -23,7 +23,7 @@ Composite data types are made up of primitive data types. They can hold multiple You can also create your own custom data types. This can be especially useful when you need a specific structure for your data that doesn't fit into the predefined types. For example, you might create a custom data type for a user profile, which includes several pieces of data like a name, an email address, and a profile picture. :::info -Learn more about creating and using custom data types [**here**](custom-data-types). +Learn more about creating and using [**Custom Data Types**](custom-data-types). ::: ## Built-in Data Types diff --git a/docs/resources/data-representation/enums.md b/docs/resources/data-representation/enums.md index d488ce28..a6088852 100644 --- a/docs/resources/data-representation/enums.md +++ b/docs/resources/data-representation/enums.md @@ -53,4 +53,8 @@ Here are some real-world examples where using Enums is beneficial: 2. Access the Enum values by navigating to the **Set from Variable** menu, then selecting **Enums > [your enum name] > Values**. -![enums.avif](../imgs/enums.avif) \ No newline at end of file +![enums.avif](../imgs/enums.avif) + +:::tip[Naming Convention] +When naming enums, always use **UpperCamelCase**, and for enum values, use **lowerCamelCase**, as recommended by the Dart Style Guide. To learn more, refer to the guide on **[Naming Variables & Functions](../../resources/style-guide.md)**. +::: diff --git a/docs/resources/imgs/comp-style-guide.png b/docs/resources/imgs/comp-style-guide.png new file mode 100644 index 00000000..72628282 Binary files /dev/null and b/docs/resources/imgs/comp-style-guide.png differ diff --git a/docs/resources/imgs/dt-style-guide.png b/docs/resources/imgs/dt-style-guide.png new file mode 100644 index 00000000..3f5fd339 Binary files /dev/null and b/docs/resources/imgs/dt-style-guide.png differ diff --git a/docs/resources/imgs/func-style-guide.png b/docs/resources/imgs/func-style-guide.png new file mode 100644 index 00000000..bac856e7 Binary files /dev/null and b/docs/resources/imgs/func-style-guide.png differ diff --git a/docs/resources/style-guide.md b/docs/resources/style-guide.md index 2e42b3fc..0af8d4ef 100644 --- a/docs/resources/style-guide.md +++ b/docs/resources/style-guide.md @@ -37,6 +37,8 @@ Use **UpperCamelCase** for all widgets, components, pages, and screen names to m Similarly, for pages and screens, include "Page" or "Screen" in the name to indicate their purpose. This approach aligns with Dart conventions for class names and ensures a well-organized project structure. +![comp-style-guide.png](imgs/comp-style-guide.png) + :::tip[Do's] - **Use UpperCamelCase for Names:** Always use **UpperCamelCase** for widgets, components, pages, and screens. Examples: `CustomButton`, `UserProfilePage`, `MainViewComponent`. @@ -68,6 +70,8 @@ Note that the style guidelines for Pages and Components also apply to **[Custom When naming custom data types and enums, use **UpperCamelCase** for consistency and clarity. Ensure that names are descriptive, providing a clear representation of the entity or purpose. +![dt-style-guide.png](imgs/dt-style-guide.png) + :::tip[Do's] - **Use UpperCamelCase for Custom Data Types:** Name your custom data types using **UpperCamelCase**. Ensure that names are clear, concise, and descriptive, reflecting the entity they represent. Good Examples: `UserModel`, `ProductDetails`, `OrderItem`. @@ -123,6 +127,8 @@ This section defines naming conventions for custom functions, actions, and actio Custom functions and custom actions created in the Custom Code tab of FlutterFlow should follow the **lowerCamelCase** naming convention. These typically reflect an action or behavior. +![func-style-guide.png](imgs/func-style-guide.png) + :::tip[Do's] - **Be descriptive and concise:** Use clear, meaningful names that describe the action or purpose of the function (e.g., `validateForm` instead of `doCheck`, or `fetchUserData` instead of `userData`). - **Use action-oriented names:** Start with verbs to indicate behavior (e.g., `submitForm`, `processPayment`).