Add images style guide (#263)

* add references to style guid doc

* add dos donts images for style guide

Author: PoojaB26

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">
     </iframe>
-</div>
+</div>
+
+:::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)**.
+:::

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
     </iframe>
 </div>
 
+:::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).

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

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)
+![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)**.
+:::

docs/resources/imgs/comp-style-guide.png

@@ -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`).