Add diagrams for generated methods & classes for model class.

Author: PoojaB26

docs/generated-code/component-gen-code.md

@@ -0,0 +1,39 @@
+---
+title: Components
+slug: /generated-code/component-model
+sidebar_position: 6
+---
+
+# Generated Code: Components
+
+Similar to a [**Page**](pages-generated-code.md), when creating a component in FlutterFlow, it automatically generates two files: a `Widget` class and a `Model` class. 
+
+:::info[Prerequisites]
+This guide uses example of the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v1)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
+:::
+
+## ComponentModel class
+
+`ComponentModel` classes are responsible for managing the state and behavior of individual components used within a page. These classes extend the `FlutterFlowModel` class, providing a consistent structure and shared functionality across all component models. This ensures that each component's state is isolated and reusable, making the app easier to maintain and scale.
+
+The lifecycle of a `ComponentModel` and its associated widget class follows the same structure as a page. For more details, refer to the documentation on **[Generated Pages](pages-generated-code.md)**.
+
+### onComponentLoad Action: Generated Code
+
+When you define actions for the `onComponentLoad` action trigger of a component, these actions are added inside an `addPostFrameCallback` method within the page's `initState` method. This ensures that the actions are executed only after the initial widget tree is built.
+
+```js
+ @override
+  void initState() {
+    super.initState();
+    _model = createModel(context, () => ProductListPageModel());
+
+    // On component load action.
+    SchedulerBinding.instance.addPostFrameCallback((_) async {
+        await _model.updateTotalCost(context);
+        safeSetState(() {});
+    });
+    
+  }
+```
+

docs/generated-code/flutterflow-model.md

@@ -0,0 +1,109 @@
+---
+title: FlutterFlow Model
+slug: /generated-code/flutterflow-model
+sidebar_position: 4
+---
+
+# FlutterFlow Model
+
+The `FlutterFlowModel` class is an abstract class used in FlutterFlow to provide a unified and extensible structure for managing state and behavior of widgets (both pages and components). It encapsulates **initialization, state management,** and **disposal** logic, making it easier to handle the lifecycle of widgets and their models. 
+
+FlutterFlow automatically generates the `flutter_flow_model.dart` file, which contains the `FlutterFlowModel` class and utility methods like `wrapWithModel()` and `createModel()`.
+
+The diagram below illustrates how these utility classes and methods are utilized in a widget or model class:
+
+
+![page-generated.png](imgs%2Fpage-generated.png)
+
+When a component is added to your page (and every component you create [generates both a widget and a model class)](component-gen-code.md), the flow below explains how the utility classes are used when there is a child component:
+
+![page-component-generated.png](imgs%2Fpage-component-generated.png)
+
+<p></p>
+
+Here’s a breakdown of the lifecycle of `FlutterFlowModel` class:
+
+## Initialization
+Ensures the model is initialized **only once** and is tied to the `BuildContext` and the widget it is associated with.
+
+```js
+abstract class FlutterFlowModel<W extends Widget> {
+  // Initialization methods
+  bool _isInitialized = false;
+  void initState(BuildContext context);
+  void _init(BuildContext context) {
+    if (!_isInitialized) {
+      initState(context);
+      _isInitialized = true;
+    }
+    if (context.widget is W) _widget = context.widget as W;
+    _context = context;
+  }
+```
+
+
+## Widget & Context references 
+
+Provides references to the associated widget and its `BuildContext`.
+
+```js
+  // The widget associated with this model. This is useful for accessing the
+  // parameters of the widget, for example.
+  W? _widget;
+  W? get widget => _widget;
+
+  // The context associated with this model.
+  BuildContext? _context;
+  BuildContext? get context => _context;
+```
+
+`_widget` and `_context` (private fields) stores the widget and context references. `widget` and `context` (getters) are the public accessors for `_widget` and `_context`.
+
+## Disposal
+
+Manages the cleanup of resources when the model or widget is disposed.
+
+```js
+ bool disposeOnWidgetDisposal = true;
+  void dispose();
+  void maybeDispose() {
+    if (disposeOnWidgetDisposal) {
+      dispose();
+    }
+    // Remove reference to widget for garbage collection purposes.
+    _widget = null;
+  }
+```
+The `disposeOnWidgetDisposal` determines whether the model should be disposed when the widget is removed. This defaults to `true` for **pages** and `false` for **components** (as parent models typically manage their child components).
+
+The `maybeDispose()` checks `disposeOnWidgetDisposal` before disposing. It removes the widget reference to aid garbage collection.
+
+## Updates and Change Notification
+
+Allows the model to notify the associated widget or parent component/page when updates occur.
+
+```js
+ // Whether to update the containing page / component on updates.
+  bool updateOnChange = false;
+  // Function to call when the model receives an update.
+  VoidCallback _updateCallback = () {};
+  void onUpdate() => updateOnChange ? _updateCallback() : () {};
+  
+  FlutterFlowModel setOnUpdate({
+    bool updateOnChange = false,
+    required VoidCallback onUpdate,
+  }) =>
+      this
+        .._updateCallback = onUpdate
+        ..updateOnChange = updateOnChange;
+  
+  // Update the containing page when this model received an update.
+  void updatePage(VoidCallback callback) {
+    callback();
+    _updateCallback();
+  }
+```
+
+## wrapWithModel() 
+
+The `wrapWithModel()` method in FlutterFlow links a model to a widget and its child widgets, allowing them to access and manage state. It wraps the widget with a Provider, making the model available throughout the widget tree.

docs/generated-code/imgs/page-component-generated.png

@@ -1,12 +1,12 @@
 ---
 title: Pages
 slug: /generated-code/page-model
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # Generated Code: Pages
 
-When you create a new page in FlutterFlow, it automatically generates two files: a `Widget` class and a `Model` class. So if the name of the page you created is called ProductListPage, FlutterFlow generation backend will automatically create ProductListPageWidget class and ProductListPageModel class. 
+When you create a new Page in FlutterFlow, it automatically generates two files: a `Widget` class and a `Model` class. So if the name of the page you created is called **ProductListPage**, FlutterFlow generation backend will automatically create **ProductListPageWidget** class and **ProductListPageModel** class. 
 
 :::info[Prerequisites]
 This guide uses example of the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v1)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
@@ -16,6 +16,15 @@ This guide uses example of the generated code of the **[EcommerceFlow demo app](
 
  The `PageModel` classes are responsible for managing the state of individual pages and initializing the components used in these Pages. These classes extend the `FlutterFlowModel` class, which provides a consistent structure and shared functionality across all page models.
 
+The following diagram shows how FlutterFlow generates the model and widget class when you create a new Page in FlutterFlow: 
+![page-generation-initial.png](imgs/page-generation-initial.png)
+
+:::tip[FlutterFlow Model]
+To learn more about the utility classes and methods that FlutterFlow generates for all pages & components, see [**the FlutterFlowModel document**](flutterflow-model.md). 
+:::
+
+
+
 #### Managing Local State
 
 A `PageModel` class typically holds local state fields specific to the page, which correspond to the **[Page State variables](../resources/ui/pages/page-lifecycle.md#page-state)**. 
@@ -154,7 +163,7 @@ These functionalities are automatically added by FlutterFlow to ensure seamless
 
 ### onPageLoad Action: Generated Code
 
-When you define actions for the `onPageLoad` action trigger of a Page, these actions are added inside an `addPostFrameCallback` method within the page's `initState` method. This ensures that the actions are executed only after the initial widget tree is built.
+When you define actions for the `onPageLoad` action trigger of a Page, these actions are added inside an `addPostFrameCallback` method within the page's `initState` method. This ensures that the **on Page Load** actions are executed after the widget is fully built and rendered. This avoids issues caused by trying to update the UI before it is ready.
 
 ```js
  @override
@@ -172,4 +181,6 @@ When you define actions for the `onPageLoad` action trigger of a Page, these act
   }
 ```
 
-The `addPostFrameCallback` ensures that onPageLoad actions are executed after the widget is fully built and rendered. This avoids issues caused by trying to update the UI before it is ready.
+:::tip[safe Set State]
+The `safeSetState` method is a custom implementation built on top of Flutter's `setState` method. It ensures that `setState` is only called when the widget is currently mounted, preventing potential runtime errors.
+:::