How to build in FF: consolidated articles from the folder "how to build in FF" in to the …

docs/ff-concepts/adding-customization/build-iot-app.md

@@ -0,0 +1,54 @@
+---
+keywords: ['iot', 'bluetooth', 'mqtt', 'flutter packages']
+slug: /build-iot-app
+title: Build an IoT App
+---
+
+# Build an IoT App
+
+An IoT (Internet of Things) app is designed to connect, monitor, and control smart devices such as sensors, thermostats, and Bluetooth-enabled devices. With FlutterFlow, it’s possible to build the front-end of an IoT app and extend its capabilities using custom code and Flutter packages.
+
+:::info[Prerequisites]
+- Familiarity with FlutterFlow’s Custom Code feature.
+- Access to target IoT devices or a simulation environment.
+- Understanding of device communication protocols such as Bluetooth or MQTT.
+:::
+
+1. **Set Up the Flutter App Structure**
+
+    Use FlutterFlow’s UI builder to create the structure of your IoT app. Common pages include:
+        - Device List
+        - Device Control Panel
+        - Settings and Connectivity
+
+2. **Integrate Custom Code or Packages**
+
+    FlutterFlow supports using custom Dart code and Flutter packages. You can use this to manage device connectivity and communication.
+
+    :::note
+    To use external packages, you must add them via **Custom Code > Packages** in your project settings.
+    :::
+
+    Popular Flutter packages for IoT functionality include:
+
+        - `flutter_blue`: Connect to and communicate with Bluetooth Low Energy (BLE) devices.
+        - `iot_sensors`: Access common sensor data such as temperature, humidity, and acceleration.
+        - `mqtt_client`: Communicate with MQTT brokers, a common protocol in IoT systems.
+        - `flutter_mqtt`: Publish and subscribe to MQTT messages from within your app.
+
+3. **Manage Device Connections and State**
+
+    Use custom actions and logic to:
+        1. Scan for available devices.
+        2. Connect or disconnect from a device.
+        3. Read or write values (e.g., sensor data, device commands).
+        4. Display real-time device states using local state or Firestore sync.
+
+4. **Test on Physical Devices**
+
+    IoT features such as Bluetooth or MQTT often require testing on real hardware. Simulators or emulators may not support these protocols.
+
+    :::warning
+    FlutterFlow's custom code executes only on physical devices or when building for mobile. Make sure to test using real devices for Bluetooth or sensor-related features.
+    :::
+

docs/ff-concepts/animations/custom-loading-bottom-sheet.md

@@ -0,0 +1,72 @@
+---
+keywords: ['make', 'custom', 'indicator', 'bottom sheet', 'loading']
+slug: /custom-loading-bottom-sheet
+title: Create a Custom Loading Animation Using a Bottom Sheet
+---
+
+# Create a Custom Loading Animation Using a Bottom Sheet
+
+Use a custom `Bottom Sheet` to display a loading animation while performing long-running actions such as API calls, database writes, or chained workflows. This guide walks through how to build a non-blocking custom loading indicator.
+
+![](../assets/20250430121406506215.gif)
+
+:::info[Prerequisites]
+- A `Bottom Sheet` component with a loading animation (e.g., Lottie, GIF, or static image)
+- A page where you want to trigger the loading sequence
+:::
+
+1. **Create a Bottom Sheet Component**
+
+   1. Go to the **UI Builder** and create a new `Component`.
+   2. Select the **Bottom Sheet** layout.
+   3. Add a loading animation:
+      - Use a **Lottie** animation, **GIF**, or any custom UI for the loading indicator.
+      - You can also include a `Text` widget to display a status message.
+
+      ![](../assets/20250430121406885071.png)
+
+   This component will serve as the visual loading indicator during your action chain.
+
+2. **Set Up the Action Workflow**
+
+   On the page where you want to trigger the loading sequence:
+
+      1. **Trigger the workflow** (e.g., on button press).
+      2. Add a `Delay` action to simulate a task (optional).
+      3. Add the `Open Bottom Sheet` action and configure it to be **non-blocking**.
+
+      ![](../assets/20250430121407233519.png)
+
+      ![](../assets/20250430121407654843.png)
+
+      :::warning
+      Enable the **Non Blocking** option in the `Open Bottom Sheet` action. This allows the workflow to continue running while the bottom sheet is visible.
+      :::
+
+3. **Add the Main Actions**
+
+      1. Add the primary actions you want to perform while the loading indicator is active.
+         - These could include `API Calls`, `Create Document`, `Update Document`, or chained actions.
+      2. For demonstration, a `Delay` of 5 seconds is used to simulate long-running tasks.
+
+4. **Dismiss the Bottom Sheet**
+
+   Once all actions are complete:
+
+      1. Add a `Close Bottom Sheet` action to remove the loading indicator.
+
+      ![](../assets/20250430121407938780.png)
+
+5. **Show a Confirmation Message**
+
+   1. Add a `Show SnackBar` action to display a success message to the user.
+
+   This confirms that the actions are complete and the bottom sheet has been dismissed.
+
+   ![](../assets/20250430121408203472.gif)
+
+You can test this implementation in the public project:
+   - Navigate to the **CustomLoading** page
+   - Tap **Login** on the login screen using the test account
+   - Select **Custom Loading** from the home page to view it in action
+

docs/ff-concepts/navigation-routing/special-page-navigation/custom-navbar-setup.md

@@ -0,0 +1,82 @@
+---
+keywords: ['custom', 'navbar', 'navigation', 'app bar']
+slug: /custom-navbar-setup
+title: Custom Navigation Bars
+---
+
+# Custom Navigation Bars
+
+Build a custom `Navigation Bar` (NavBar) to support dynamic views, role-based access, or complex widget layouts such as embedded cart counters or animated icons. Unlike the default NavBar widget, this approach gives full control over design and visibility.
+
+![](../assets/20250430121449657102.png)
+
+:::info[Prerequisites]
+- A component to be used as the custom NavBar.
+- Pages with `Stack` layout to allow overlay positioning.
+- Local State variable or conditional logic to control visibility.
+:::
+
+Follow the steps below:
+
+1. **Build the NavBar Component**
+
+   1. Create a **Component** and design your NavBar layout.
+   2. Add widgets as needed: icons, labels, counters, conditional containers, etc.
+   3. Ensure the NavBar’s height is consistent across screens (e.g., `100px`).
+
+2. **Add the NavBar to Your Pages**
+
+   1. Wrap the page layout in a `Stack`.
+   2. Place the NavBar component inside a `Container` widget.
+      - Set the container’s vertical alignment to `1` (bottom).
+      - Set its width and height to match screen width and desired NavBar height.
+
+      ```plaintext
+      Page
+      └─ Stack
+         ├─ Main Page Content
+         └─ Container (height: 100px, align: bottom)
+               └─ NavBar Component
+      ```
+
+3. **Configure NavBar Behavior**
+
+   1. Add `Bottom Padding` to your main page content equal to the NavBar’s height. This prevents the NavBar from overlapping other widgets.
+
+   ![](../assets/20250430121450015102.png)
+
+   2. Use `Local State`, `App State`, or conditional logic from a database (e.g., `is_admin`) to control:
+      - Which version of the NavBar appears.
+      - Whether the NavBar is visible at all.
+
+   :::warning
+   Avoid placing the custom NavBar on subpages. NavBar components should only be used on top-level pages. Adding back navigation (e.g., `Pop` actions) to these pages may result in routing issues.
+   :::
+
+**Example: Conditional NavBar Logic**
+
+   You can conditionally display different layouts depending on the user’s role:
+      - **Admin** users may see extra items or a different layout.
+      - **Standard** users may have limited options.
+      - Use the `is_admin` field from the `Users` collection to control this logic dynamically.
+
+**Sample Project:**
+
+   A public sample project is available demonstrating:
+      - A basic custom NavBar
+      - A conditional NavBar that changes layout based on user role
+
+      **How to Use the Sample:**
+
+         1. Launch the project.
+         2. Tap **Login** using the pre-configured test user.
+         3. Navigate to:
+            - **Custom NavBar/AppBar** to view a static NavBar layout.
+            - **Conditional NavBar** to explore role-based NavBar behavior.
+            - Toggle the `is_admin` field to test both states.
+
+         ![](../assets/20250430121450326812.png)
+
+         ![](../assets/20250430121450591399.png)
+
+         ![](../assets/20250430121450801118.png)

docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md

@@ -49,6 +49,57 @@ To add the PageView widget to your app:
     </iframe>
 </div>
 
+## Use Case: Image Carousel with Auto-Scroll
+
+You can build an image carousel using the `PageView` widget combined with the `Control Page View` action. This allows users to scroll through images either manually or automatically.
+
+**Steps Overview:**
+
+    1. **Add a PageView Widget**
+        - From the **Widget Panel**, drag the `PageView` widget onto the canvas.
+        - Populate it with your image widgets or bind it to a dynamic image list.
+
+    2. **Set Up Page Load Action**
+        - Select the `Scaffold` or main container.
+        - Add a `Page Load` action to trigger carousel behavior.
+
+    3. **Add `Control Page View` Action**
+        - Use the `Control Page View` action to control transitions:
+            - `Next`, `Previous`, `First`, or `Last`.
+
+    4. **Auto-Scroll Behavior (Optional)**
+        - Add a sequence of:
+            - `Control Page View` → `Wait` → `Control Page View` (Next)
+        - Loop this logic to create a smooth, timed carousel experience.
+
+            ![Carousel Example](../assets/20250430121318472792.gif)
+
+## Use Case: Image Slider from List of Image URLs
+
+This example demonstrates how to build a dynamic image slider using a list of image URLs—ideal for product detail screens or galleries.
+
+Follow the steps below:
+
+1. **Add a PageView Widget**
+   - Place a `PageView` on your screen.
+
+2. **Bind to the Image List**
+   - Generate dynamic children from your list of image URLs.
+
+3. **Add a Repeating Child**
+   - Use a single `Image` widget inside the `PageView`.
+   - Bind the `Image URL` to the current list item.
+
+    :::tip
+    You only need one child inside the PageView. When bound to a list, it automatically repeats for each item.
+    :::
+
+    :::tip
+    - Use horizontal scroll for carousels and onboarding pages.
+    - Combine with indicators or swipe gestures for a richer UX.
+    - Use `Wait` and `Control Page View` actions to create auto-scroll behavior.
+    :::
+
 ## Adding infinite scroll
 
 The PageView widget is an incredibly versatile widget that can be utilized in a variety of situations to create interactive applications. For example, you might want to use it in an app that involves reading books, magazines, or similar content to mimic the experience of flipping through pages.

docs/ff-concepts/notifications/push-notifications.md

@@ -237,6 +237,31 @@ In this action, you can decide who should receive the push notification by setti
 
 ![trigger push notifications](imgs/trigger-pn.avif)
 
+### Send Notifications to Multiple Users (Dynamic)
+
+To notify a group of users when a document is created (e.g., group chat, announcement, or event), follow this flow:
+
+1. **Add a Backend Query**
+   - Add an **Action** → **Backend Query** before sending the notification.
+   - Set **Query Type** to `Query Collection` and select your users collection (e.g., `users`).
+   - Set **Return Type** to `List of Documents`.
+
+2. **Create a Document**
+   - Add an **Action** → **Create Document** to store the submitted content (e.g., a post or message).
+
+3. **Trigger Notification**
+   - Add an **Action** → **Trigger Push Notification**.
+   - Set the **audience** to **Multiple Recipients**.
+   - Under **Recipients**:
+     - Select **Filter List Items** → **Items in List > Document Exists** to apply conditions.
+     - Then choose **Map List Items** → `Document Properties` → `Reference` to get user document references.
+
+    The notification will be sent to all users matching your filters, using the queried list.
+
+    :::tip
+    Use this approach for dynamic group-based notifications tied to app activity, like chat, announcements, or tasks.
+    :::
+
 ## Testing Push Notifications Cloud Function
 
 You can also test the Push Notifications Cloud Function directly from the Google Cloud console, without needing to trigger from FlutterFlow. This is especially useful for debugging purposes. For step-by-step instructions, including an example and how to structure the request, refer to the [Testing Cloud Functions in Google Cloud Console](../../ff-concepts/adding-customization/cloud-functions.md#testing-cloud-functions-in-google-cloud-console) section.