doc: env manager user guide

CONTRIBUTING.md

@@ -127,20 +127,6 @@ Example:
 flutter test test/widgets/codegen_previewer_test.dart
 ```
 
-#### Running an Integration test
-
-To run an integration test, execute the following command:
-
-```
-flutter test integration_test/<file_path>.dart
-```
-
-Example:
-
-```
-flutter test integration_test/desktop/env_manager_test.dart
-```
-
 ### How to add a new package to pubspec.yaml?
 
 Instead of copy pasting from pub.dev, it is recommended that you use `flutter pub add package_name` to add a new package to `pubspec.yaml`. You can read more [here](https://docs.flutter.dev/packages-and-plugins/using-packages#adding-a-package-dependency-to-an-app-using-flutter-pub-add).

doc/user_guide/env_user_guide.md

@@ -27,3 +27,39 @@ Suppose you have a variable named `API_URL` defined in both the Global Scope and
   - `API_URL` = `https://api.apidash.dev`
 
 If the `Development` environment is active, `https://api.apidash.dev.com` will be used as the `API_URL`. If no environment is active, or if a different environment is active, the Global Scope value `https://api.foss42.com` will be used.
+
+## Using a Variable
+
+To use a variable in API Dash, follow these steps:
+
+1. **Declare the Variable:**
+
+First, ensure that the variable is declared either in the Global Scope or within the desired Environment Scope. You can do this through the Environment Variables Manager.
+
+2. **Select the Active Environment:**
+
+If your variable is environment-specific, ensure that the correct environment is selected as active. This ensures that the appropriate value is used.
+
+3. **Insert the Variable into a Field:**
+
+![Image](./images/env/var_suggestions.png)
+
+When constructing a request, insert the variable into a field by typing the variable name prefixed with `{` or `{{`. As you start typing, API Dash will display suggestions based on the available variables. You can select a variable from the suggestions or continue typing to manually enter the variable, such as `{{API_URL}}` or `{{var}}`.
+
+#### Fields that currently support variables:
+
+- URL field.
+- Params (key & value).
+- Header (key & value).
+
+> Note: The Header key field supports variable substitution but does not offer highlighting or suggestions.
+
+4. **Checing scope and value**
+
+![Image](./images/env/active_variable.png)
+
+You can quickly check the scope and value of a variable by hovering over it on Desktop or tapping it on Mobile. The blue highlighting indicates that the variable is available in a particular scope and its value will be substituted.
+
+![Image](./images/env/inactive_variable.png)
+
+If a variable is not found in either the active or global scope, it will be highlighted in red. When substituted, its value will be an empty string, indicating that it's undefined.