Pooja/minor updates (#115)

* Add more clarifications to certain parts

* Rearrange custom code pubspec information.

* Add more clarifications and fix links

Author: PoojaB26

docs/ff-concepts/adding-customization/custom-actions.md

@@ -118,12 +118,13 @@ Flow.
 
 <p></p>
 
+
 :::tip[LOOKING for other CUSTOM action properties?]
 To learn more about Custom Action settings, such as the 
 [**Exclude From Compilation toggle**](custom-code.md#exclude-from-compilation), 
 [**Include Build Context toggle**](custom-code.md#include-buildcontext), 
 and other properties like [**Callback Actions**](custom-code.md#add-a-callback-action), 
-[**Pub Dependencies**](custom-code.md#adding-a-pub-dependency), please check out this
+[**Pubspec Dependencies**](custom-code.md#adding-a-pubspec-dependency), please check out this
 [**comprehensive guide**](custom-code.md).
 :::
 

docs/ff-concepts/adding-customization/custom-code.md

@@ -217,20 +217,24 @@ Here's an example of an Action that returns a _nullable_ integer.
 
 ![return-value-actions.png](imgs/return-value-actions.png)
 
-#### Adding a Pub Dependency
+## Adding a Pubspec Dependency
 
 :::tip[Scope]
-You can only add a pub dependency to Custom Action & Custom Widgets.
+You can only add a pubspec dependency to [**Custom Action**](custom-actions.md) & [**Custom Widgets**](custom-widgets.md).
 :::
 
-If you plan to use a dependency from [*pub.dev*](https://pub.dev/) into a custom widget or action,
-you must go through the following steps:
+###  Pub.dev 
+[Pub.dev](https://pub.dev) is the official package repository for Dart and Flutter. It hosts a wide range of packages, libraries, and tools that developers can use to extend the functionality of their Dart and Flutter applications.
 
-1. [Choosing dependency](#1-choosing-dependency)
-2. [Copying dependency/package name](#2-copying-dependency-name)
-3. [Copying import statement](#3-copying-import-statement)
+:::info[Flutter Favourite Packages]
 
-##### 1. Choosing dependency
+Flutter Favorite packages are a curated set of packages on pub.dev that have been recognized by the Flutter team and the community for their quality, popularity, and usefulness in Flutter development. These packages are marked with a "Flutter Favorite" badge, indicating that they meet a high standard of quality, reliability, and best practices.
+
+You can explore the Flutter Favorite packages on **[pub.dev's Flutter Favorites page](https://pub.dev/packages?q=is%3Aflutter-favorite)**.
+
+:::
+
+### Choosing the correct package from pub.dev
 
 You will find varieties of dependencies for a specific requirement, and choosing the best one can be
 challenging. This section helps you identify the right dependency by examining its score.
@@ -257,7 +261,9 @@ one.
 
 ![Dependency-score.png](imgs/Dependency-score.png)
 
-##### 2. Copying dependency name
+When adding a pubspec dependency to your custom code in FlutterFlow, you’ll need two pieces of information: the [package name with its version number](#copy-package-name--version-) and the [import statement](#copying-import-statement).
+
+#### Copy Package Name & Version 
 
 To use the dependency code in our code editor, copy its name with the version. To do so, click
 the **Copy to Clipboard** icon.
@@ -278,7 +284,7 @@ section at the bottom right side.
 
 ![img_1.png](imgs/img_1.png)
 
-##### 3. Copying import statement
+#### Copying import statement
 
 An import statement points to where the dependency's code is located. When making a custom widget or
 action, place this statement at the beginning of the code editor.
@@ -288,7 +294,44 @@ the import statement. To copy, click the **Copy to Clipboard**  icon.
 
 ![img_2.png](imgs/img_2.png)
 
+### Add Pubspec Dependency to Custom Code: Guide
+In this example, we are using the
+[**flutter_rating_bar**](https://pub.dev/packages/flutter_rating_bar) dependency to create a
+`ProductRatingBar` custom widget for our
+Product pages. See how we utilize the example code from pub.dev and add the customized widget in
+FlutterFlow:
 
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/EAqWwTSfjumXzJ3xB6FX?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+
+<p></p>
+
+:::note
+This example demonstrates how to add a [pub.dev](https://pub.dev) package to a Custom Widget snippet, but you can follow the same process for adding a package to Custom Actions. For a deep dive, explore the detailed documentation on **[Custom Widgets](custom-widgets.md)** and [Custom Actions](custom-actions.md).
+:::
 
 
 

docs/ff-concepts/adding-customization/custom-widgets.md

@@ -61,7 +61,7 @@ this example, we will create a `ProductRatingBar` widget that uses a pub.dev dep
 
 For custom widgets, it is mandatory to specify both width and height. These properties are required to size the custom widget appropriately. Without setting these dimensions, the custom widget will not render correctly within your application.
 
-## Adding a pub.dev dependency
+## Add Dependency to Custom Widgets
 
 In this example, we are using the 
 [**flutter_rating_bar**](https://pub.dev/packages/flutter_rating_bar) dependency to create a 
@@ -95,6 +95,10 @@ FlutterFlow:
     </iframe>
 </div>
 
+:::tip[Choosing a Pubspec Dependency]
+For a comprehensive guide on navigating external packages using pub.dev, evaluating packages, and making the best choices for your app, [**follow the guide**](custom-code.md#adding-a-pubspec-dependency).
+:::
+
 ## Using a Custom Widget
 To add a custom widget to your page, you can drag and drop it from the Widget Palette's Components section or through the Widget Tree section. Here is a demo:
 
@@ -167,7 +171,7 @@ FlutterFlow also allows you to view your custom widget once it is successfully c
 To learn more about Custom Widget settings, such as the
 [**Exclude From Compilation toggle**](custom-code.md#exclude-from-compilation),
 and other properties like [**Callback Actions**](custom-code.md#add-a-callback-action),
-[**Pub Dependencies**](custom-code.md#adding-a-pub-dependency), please check out this
+[**Pub Dependencies**](custom-code.md#adding-a-pubspec-dependency), please check out this
 [**comprehensive guide**](custom-code.md).
 :::
 

docs/resources/control-flow/overview.md

@@ -72,15 +72,15 @@ data or performing calculations. In FlutterFlow, you can use
 
 * **[Actions](functions/action-flow-editor.md):** Sequence of Logic performed in response to 
   user interactions. For example: 
-  * **Updating State Variables:** Functions that modify the current state or data of the app,
+  * **[Updating State Variables:](../../ff-concepts/state-management/state-variables.md)** Functions that modify the current state or data of the app,
     page, or
     component.
 
   * **Widget-specific Functions:** Functions applicable to various widgets that need specific
     actions, such as scrolling to an item in a ListView, clearing text fields, or calling third-party
     integration functions.
 
-  * **Custom Actions:** More complex actions written in **Flutter & Dart** that can be added as a node to
+  * **[Custom Actions:](../../ff-concepts/adding-customization/custom-actions.md)** More complex actions written in **Flutter & Dart** that can be added as a node to
     the action flow editor.
 
 * **[Navigation:](../../ff-concepts/navigation-routing/nav-overview.md)** Functions that handle 

docs/resources/data-representation/global-properties.md

@@ -9,16 +9,18 @@ keywords: [Global Properties, FlutterFlow, Data Representation]
 
 # Global Properties
 
-Global properties are accessible across all pages of your app. They act as a utility function to accomplish a common task regardless of the type of app you are developing. 
+Global properties are **built-in variable**s in FlutterFlow that you can use across all pages of your app. These properties are predefined by FlutterFlow, meaning you cannot create or modify them yourself. They are designed to help you perform common tasks efficiently, no matter what type of app you’re developing.
 
-For instance, you may need to redirect to a different page if a user is not logged in. Or, you may want to enable specific functionality based on the platform. In such scenarios, global properties are useful.
+For example, global properties can be used to redirect users to another page if they are not logged in or to enable specific functionality based on the platform your app is running on.
 
-You can access these properties via the **Set from Variable menu > Global Properties**.
+You can access these properties through the **Set from Variable** menu **> Global Properties**.
+
+<p></p>
 
 ![global-properties.avif](../imgs/global-properties.avif)
 
-:::note
-Global properties are exposed by FlutterFlow. You can't create one by yourself.
+:::caution
+Global properties are built-in variables exposed by FlutterFlow. You can't create one by yourself.
 :::
 
 ## List of Global Properties

docs/resources/data-representation/overview.md

@@ -4,7 +4,7 @@ title: Overview
 description: Explore the essentials of data representation in app development, focusing on the use of variables in FlutterFlow.
 tags: [Data Representation, FlutterFlow, Variables]
 sidebar_position: 0
-keywords: [Data Representation, FlutterFlow, Variables]
+keywords: [Data Representation, FlutterFlow, Variables, Data Types, Global Data, Encapsulation]
 ---
 
 # Overview
@@ -28,7 +28,7 @@ Variables are used in practically all areas of the app, from the user interface
 
 To create a variable, start by defining its name and data type. If it's going to contain a list, you can specify that. Certain variables, such as page state and component state variables, are non-nullable by default, meaning they must contain a value. After defining the variable, you can assign a value to it.
 
-Learn more about creating [app state variables](../data-representation/app-state.md), [page state variables](../../resources/ui/pages/page-lifecycle/#page-state), and [component state variables](../../ff-concepts/state-management/generated-code.md#component-state).
+Learn more about creating [app state variables](../data-representation/app-state.md), [page state variables](../../resources/ui/pages/page-lifecycle/#page-state), and [component state variables](../ui/components/custom-components/component-lifecycle#component-state).
 
 ### Setting and using variables
 
@@ -52,9 +52,9 @@ Learn more about data types [**here**](data-types.md).
 
 All variables in FlutterFlow are mutable. This means you can change their values at runtime based on user interactions or other events in your app. FlutterFlow also supports immutable data, such as [Constants](constants.md) that cannot be changed once they have been set.
 
-## Global data
+## Global Properties
 
-Global data are accessible from anywhere within the app. They are helpful, especially when the data is required frequently or by various components or pages. In FlutterFlow, they are available as [Global Properties](global-properties.md).
+Global properties in FlutterFlow are built-in variables that you can use across your app, but they cannot be created or modified by users. Learn [how to leverage these predefined properties](global-properties.md) to simplify common tasks.
 
 ## Encapsulation
 

docs/resources/ui/components/custom-components/component-lifecycle.md

@@ -70,7 +70,7 @@ created.
 
 :::note[STATE VARIABLES]
 A state variable holds information or data about your UI at any given moment. To learn more
-about **states and state management, [refer here.](../../../../ff-concepts/state-management/generated-code.md)**
+about **states and state management, [refer here.](../../../../ff-concepts/state-management/state-variables.md)**
 :::
 
 **Component state** refers to the information that a component tracks about its current condition or

docs/resources/ui/overview.md

@@ -60,7 +60,7 @@ A Page usually contains a combination of widgets and components.
 ![everything-widget.png](imgs%2Feverything-widget.png)
 
 Let's talk about widgets first, 
-which are the the atomic elements or building blocks of the UI structure in FlutterFlow. 
+which are the atomic elements or building blocks of the UI structure in FlutterFlow. 
 
 Each widget can be thought of as an atom or a molecule, depending on its complexity and its parent-child
 relationship. For example, an atomic widget (such as `TextField`) cannot hold a child element, but 

docs/resources/ui/pages/page-elements.md

@@ -22,7 +22,7 @@ and offers customization with a variety of styles and functionalities.
 
 The AppBar is divided into the following sections:
 
-- **Leading:** Typically holds a menu or back button, providing navigation control.
+- **Leading:** Typically holds a **menu** or **back icon** that provides navigation control. By default, if there is a [**drawer**](#drawers) or [**page navigation**](../../../ff-concepts/navigation-routing/page-navigation.md) with ["Allow Back Navigation" enabled](../../../ff-concepts/navigation-routing/page-navigation.md#navigate-to-action), a specific icon (such as a menu or back arrow) is displayed. However, you can override this with another [**Icon widget**](../../ui/widgets/built-in-widgets/icons.md) if desired, allowing for more tailored navigation options.
 - **Title:** Primarily serves to indicate the content of the active screen or to display the
   name of the application, aiding users in recognizing their context within the app. This section
   can also be customized with different widgets for a more tailored visual representation.
@@ -57,6 +57,17 @@ The AppBar is divided into the following sections:
     </iframe>
 </div>
 
+### Enable Default Button
+The "Show Default Button" toggle in the **AppBar** Properties Panel controls whether the default leading icon (usually a back arrow or a menu icon) appears when the user can [navigate back](../../../ff-concepts/navigation-routing/page-navigation.md) or when a [Drawer](#drawers) is present on the page.
+
+However, it's important to note that this default icon won't appear in the FlutterFlow canvas during the design stage. It only becomes visible when the app is running, and the conditions for showing the button are met.
+
+If you wish to replace the default icon with another icon in the leading space, follow the [guide on adding an AppBar](#add-an-appbar-to-your-page).
+
+:::tip[Generated Code]
+In the generated code, when this toggle is enabled, [`automaticallyImplyLeading`](https://api.flutter.dev/flutter/material/AppBar/automaticallyImplyLeading.html) property in the **AppBar** widget is set to `true`. This means that the appropriate default button will be displayed if a back navigation option or Drawer is detected when you run the app. 
+:::
+
 ## Floating Action Button (FAB)
 
 **Floating Action Button (FAB)** is a distinctive circular button that hovers over content, commonly

docs/resources/ui/pages/page-lifecycle.md

@@ -101,7 +101,7 @@ trigger specific actions in response to a phone shake gesture.
 
 :::note[State Variables]
 A state variable holds information or data about your UI at any given moment. To learn more
-about **states and state management, [refer here](../../../ff-concepts/state-management/generated-code.md)**
+about **states and state management, [refer here](../../../ff-concepts/state-management/state-variables.md)**
 :::