Skip to content

Commit 02d0506

Browse files
authored
Merge pull request #228 from FlutterFlow/pinkesh/on-dispose
Added On Dispose Info
2 parents 8b5fc25 + d5c658c commit 02d0506

File tree

3 files changed

+25
-0
lines changed

3 files changed

+25
-0
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,15 @@ created.
7171
Your component can also respond to certain keypress events. For more details on setting this up, see [this section on
7272
keyboard shortcuts](/resources/ui/pages/page-lifecycle#on-shortcut-press-action-trigger).
7373

74+
### On Dispose [Action Trigger]
75+
The **On Dispose** action trigger for components allows you to define actions that execute when the page containing the component is navigated away or removed from memory. It is particularly useful for stopping ongoing operations.
76+
77+
Imagine a scenario where a [periodic action](../../../resources/control-flow/time-based-logic/periodic-action.md), such as fetching live weather updates, is started in a component when it is loaded (i.e, [On Initialization](#on-initialization-action-trigger)). The action runs periodically, providing real-time data updates as long as the component is active. However, when the page containing the component is navigated away, you need to stop the periodic action to conserve resources and prevent unnecessary processing. By using the On Dispose action trigger, you can safely stop the periodic updates and clean up any associated resources.
78+
79+
:::info
80+
The **On Dispose** action trigger is always executed before the [**parent page’s On Dispose**](../pages/page-lifecycle.md#on-dispose-action-trigger). This ensures that the component cleans up its resources first, allowing the parent to finalize its disposal without dependencies on the child.
81+
:::
82+
7483
## Component state
7584

7685
:::note[STATE VARIABLES]
Binary file not shown.

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,22 @@ For instance, if you have a shortcut assigned to the letter "C" and a user tries
150150
To handle this, you can enable the option on the `TextField` widget to bypass keyboard shortcuts. However, it’s generally better to assign more unique combinations, like Cmd + C, which are less likely to conflict with normal typing in a text field.
151151
:::
152152

153+
### On Dispose [Action Trigger]
154+
155+
The **On Dispose** action trigger allows you to define actions that execute when a page is navigated away from or removed from memory. It is particularly useful for stopping ongoing operations.
156+
157+
Imagine a scenario where [audio recording](../../../ff-concepts/file-handling/audio/audio-recroding.md) is started when the page loads using the [On Page Load](#on-page-load-action-trigger) action trigger. The recording process runs as long as the user remains on the page. However, when the user navigates away, you need to stop the recording to save resources and ensure the recorded audio is finalized. By using the On Dispose action trigger, you can safely stop the recording and save the file.
158+
159+
Additionally, if you are using a third-party package that relies on persistent connections or listeners, you can leverage [Custom Actions](../../../ff-concepts/adding-customization/custom-actions.md) with the On Dispose action trigger to close streams or cancel subscriptions.
160+
161+
:::tip[Possible Use Cases]
162+
- **Cleaning Up Resources:** Use this action trigger to cancel timers, close database connections, or unsubscribe from streams to prevent memory leaks and unnecessary processing.
163+
- For example, real-time applications, such as stock trading platforms, rely on WebSocket connections to fetch live updates. A homepage displaying a live ticker of stock prices would require opening the WebSocket connection on page load and closing it on On Dispose. Without an On Dispose trigger, the WebSocket connection could remain open unnecessarily, leading to wasted resources and app instability.
164+
- **Finalizing Database Transactions**: Commit or roll back database transactions if the user leaves the page before completing the process.
165+
- **Logging or Analytics:** Track user behavior or log events (e.g., page exit or time spent on a page) to monitor user engagement and improve the application experience.
166+
:::
167+
![page-on-dispose.avif](imgs/page-on-dispose.avif)
168+
153169
## Page state
154170

155171
:::note[State Variables]

0 commit comments

Comments
 (0)