updated content, improved formatting

Author: mrdavidorok

docs/troubleshooting/migrate-widget-issues/_category_.json

@@ -1,3 +1,3 @@
 {
-  "label": "Migrate Widget"
+  "label": "Widget"
 }

docs/troubleshooting/migrate-widget-issues/configure_text_widget_auto_size_behavior.md

@@ -0,0 +1,55 @@
+---
+keywords: ['widget', 'auto size', 'text widget']
+slug: /configure-text-widget-auto-size-behavior
+title: Configure Text Widget Auto Size Behavior
+---
+
+# Configure Text Widget Auto Size Behavior
+
+The `Auto Size` option allows the `Text` widget to automatically reduce its font size to fit within its parent widget. This guide outlines the expected behavior and conditions required for this feature to function correctly.
+
+:::info[Prerequisites]
+- A `Text` widget has been added to the canvas.
+- The widget is placed inside a parent widget such as a `Container` or `Stack`.
+:::
+
+## Configure Parent Widget Dimensions
+
+  To enable `Auto Size`, the `Text` widget must be inside a widget that has both defined width and height. Without these constraints, the font size cannot be adjusted automatically.
+
+  1. Select the `Text` widget.
+  2. Check its parent widget.
+  3. Ensure both width and height are explicitly defined.
+
+  Without defined dimensions, the `Auto Size` feature may not behave as expected.
+
+  **Behavior Scenarios:**
+
+    The following examples illustrate how `Auto Size` behaves under different container configurations:
+
+      - Container with width set to `infinity` and height set to `100px`, `Auto Size` disabled.  
+        The text may overflow beyond the container.
+
+      - Container with width set to `infinity` and height set to `100px`, `Auto Size` enabled.  
+        The font size adjusts to fit the defined height.
+
+      - Container with width set to `30%` and no height defined, `Auto Size` enabled.  
+        The feature has no visible effect due to missing height constraint.
+
+      - Container with width set to `70%` and height set to `50px`, `Auto Size` enabled.  
+        The text is resized to the minimum allowed font size to remain within the container.
+
+        ![](../assets/20250430121459696014.png)
+
+  :::tip
+  Use `Auto Size` with percentage-based dimensions for better responsiveness. For example, set the container width to `30%` and enable `Auto Size` to allow the text size to adjust as the screen size changes.
+  :::
+
+  :::note
+  The `Auto Size` feature has a minimum font size threshold. If the container becomes too small, text may clip or overflow when resizing is no longer possible.
+  :::
+
+
+  :::info[Additional Resources]
+  For more information, refer to the **[Text Widget Configuration Guide](/ui-builder/text-widget)**.
+  :::

docs/troubleshooting/migrate-widget-issues/troubleshooting_custom_widgets.md renamed to docs/troubleshooting/migrate-widget-issues/custom_widget_errors.md

@@ -1,10 +1,10 @@
 ---
 keywords: ['custom widget', 'widget errors', 'widget troubleshooting', 'flutterflow']
-slug: /troubleshooting-custom-widgets
-title: Troubleshooting Custom Widgets
+slug: /custom-widget-errors
+title: Custom Widget Errors
 ---
 
-# Troubleshooting Custom Widgets
+# Custom Widget Errors
 
 This article demonstrates common errors and issues that may occur when creating a `Custom Widget` in FlutterFlow, along with steps to resolve them. In this example, an `Animated Text Widget` is used.
 
@@ -14,18 +14,22 @@ This article demonstrates common errors and issues that may occur when creating
 
 **Run Mode URL:** [Animated Kit Widget Run Mode](https://app.flutterflow.io/run/QP62FwanUTRs7O3HJzdo)
 
+:::info[Prerequisites]
+- A custom widget has been added to your project.
+- Necessary packages have been added to **Custom Code > Packages**.
+:::
 
 :::tip[Best Practices Before Creating a Custom Widget]
 - Set a unique name for the custom widget in the left panel `Side Widget` field.
 - Start with the boilerplate code template provided by FlutterFlow. Copy it and modify your code from there.
-:::
 
 ![](../assets/20250430121323364253.gif)
+:::
 
 
 **Common Errors and Solutions:**
 
-    1. **Widget Name Conflicts with Package Name**
+    - **Widget Name Conflicts with Package Name**
 
         One common issue is using a widget name that conflicts with the name of a package you have imported as a dependency.
 
@@ -35,11 +39,13 @@ This article demonstrates common errors and issues that may occur when creating
 
         Avoid using generic or conflicting names like `main` or `widget`. Always use unique widget names that do not overlap with any package names.
 
-    2. **Missing Package Imports in Code**
+    - **Missing Package Imports in Code**
 
         After adding an external package as a dependency, it is required to import the package at the top of your code. If you forget to do this, you may encounter errors such as:
 
-        "The method X isn't defined..."
+        ```js
+        The method 'AnimatedText' isn't defined...
+        ```
 
         ![](../assets/20250430121324695186.png)
 
@@ -48,26 +54,22 @@ This article demonstrates common errors and issues that may occur when creating
             - Visit the package page on **[pub.dev](https://pub.dev/)** and locate the import line in the package details section.
             - Copy and paste the correct import statement into your custom widget code.
 
-                Example:
-
                 ![](../assets/20250430121324981835.png)  
                 ![](../assets/20250430121325311155.png)
 
 
-    3. **Missing Indirect Dependencies**
+    - **Missing Indirect Dependencies**
 
         Some packages may rely on additional external packages. Ensure that all required dependencies are also imported in your code.
 
         ![](../assets/20250430121325659677.png)
 
-        In this example, the package depends on another package named `silver_tools`, which must also be imported:
+        In this example, the package depends on another package named `silver_tools`, which must also be imported. Always review the dependency chain for any external packages you add.
 
         ![](../assets/20250430121325972589.png)
 
-        Always review the dependency chain for any external packages you add.
-
-
-    4. **Widget Name Mismatch Between UI and Code**
+        
+    - **Widget Name Mismatch Between UI and Code**
 
         If you forget to update the widget name in the boilerplate code, a mismatch may occur between the widget name defined in FlutterFlow and the class name in your code. This will lead to compilation errors.
 

docs/troubleshooting/migrate-widget-issues/emoji-size-on-ios-devices.md

@@ -0,0 +1,42 @@
+---
+keywords: ['ios', 'emoji', 'text', 'size']
+slug: /emoji-size-on-ios-devices
+title: Emoji Size on iOS Devices
+---
+
+# Emoji Size on iOS Devices
+
+On iOS devices, emojis can appear oversized when rendered inside text widgets, disrupting the intended design and layout. This guide explains how to maintain consistent emoji sizing across all devices using container constraints and auto-sizing configuration.
+
+:::info[Prerequisites]
+- You are using a `Text` widget that includes emojis.
+- You are targeting iOS devices as part of your app deployment.
+:::
+
+## Steps to Maintain Consistent Emoji Size
+
+1. **Wrap the Text Widget in a Container**  
+   Create a `Container` with fixed width and height (example `32x32 pixels`) to restrict the emoji size.
+
+2. **Place the Emoji Inside a Text Widget**  
+   Add a `Text` widget containing the emoji and place it inside the container.
+
+3. **Set a Font Size**  
+   Apply a specific font size to the `Text` widget (example, `16`, `24`, etc.).
+
+4. **Enable Auto-Size**  
+   Turn on **Auto-Size** in the `Text` widget to allow responsive resizing within the fixed container.
+
+   ![](../assets/20250430121253238523.png)
+
+   This ensures that the emoji will resize according to the container's constraints and not exceed the intended bounds.
+
+   :::tip
+   Auto-sizing works best when paired with fixed dimensions. This combination allows the emoji to scale appropriately while avoiding oversized rendering.
+   :::
+
+   ![](../assets/20250430121252902305.png)
+
+:::info
+For more context and support, refer to the **[official FlutterFlow guide on emoji rendering](https://intercom.help/flutterflow/en/articles/7044370-text-emoji-is-very-large-on-some-ios-devices)**.
+:::

docs/troubleshooting/migrate-widget-issues/getting_output_from_custom_widgets_using_app_state.md

@@ -0,0 +1,51 @@
+---
+keywords: ['listview', 'infinite scroll', 'pagination']
+slug: /infinite-scroll-pagination-in-listview
+title: Infinite Scroll Pagination in ListView
+---
+
+# Infinite Scroll Pagination in ListView
+
+If a `ListView` with **Infinite Scroll** enabled loads all items at once instead of paginating, the issue is typically related to layout configuration. This guide outlines how to correctly structure the widget for proper pagination behavior.
+
+:::info[Prerequisites]
+- Infinite Scroll is enabled in the `ListView`.
+- The widget is placed inside a layout that allows height constraints to be respected.
+:::
+
+Follow the steps below to configure listView for pagination:
+
+1. **Ensure ListView Has a Defined Height**  
+   A `ListView` must have a height constraint to determine the viewport size and paginate correctly. Without a defined height, it will attempt to load all items.
+
+2. **Let ListView Handle Its Own Scrolling**  
+   - Disable scrolling in any parent `Column` or scrollable container.  
+   - Enable the **Primary** option and wrap `ListView` in an `Expanded` widget.  
+   - This allows `ListView` to control scroll behavior and calculate items to load per page.
+
+      ![](../assets/20250430121248035007.png)
+
+3. **Wrap ListView Inside a Fixed-Height Container (if nested)**  
+   If `ListView` is inside a scrollable parent (like `Column` or `ListView`), wrap it in a `Container` with a defined height (e.g., `500px`). This ensures it doesn't expand indefinitely.
+
+      ![](../assets/20250430121248379992.png)
+
+4. **Avoid Missing Height Constraints**  
+   Without constraints, `ListView` will not know the visible size and will load all data at once, bypassing pagination.
+
+   :::warning
+   Placing `ListView` directly inside a scrollable parent without a defined height will break Infinite Scroll behavior.
+   :::
+
+5. **Use Layout Structure That Supports Scroll Isolation**  
+   Allow `ListView` to scroll independently before the parent scroll takes over. Combine this with defined height and `Expanded` usage for best results.
+
+      ![](../assets/20250430121249048672.gif)
+
+:::tip
+To optimize pagination, define consistent item heights and test using varying screen sizes.
+:::
+
+:::info[Additional Resources]
+- **[ListView Scroll Example Project](https://app.flutterflow.io/project/list-view-scroll-example-wdv076)** – View a working configuration example.
+:::