Mastering user onboarding in FlutterFlow: custom action chains

Introduction

User onboarding is a critical step in the user experience journey. When a new user creates an account, it’s essential to guide them through the process of providing necessary information like their first and last name, date of birth, gender, age, ... While this flow is straightforward when the user follows it in one go, issues arise if they close the app midway and return after some time. In this blog, we’ll explore how to handle this scenario in FlutterFlow using custom action chains and other best practices.

Why onboarding matters

When users create an account but don’t complete their profile, they may miss out on personalized experiences, and you might lose valuable data. Making sure that users complete their profile is essential for both user engagement and data integrity. 

Handling incomplete onboarding in FlutterFlow

To manage user onboarding effectively, especially when users close the app before completing their profile, we can use “on page load”actions.

Scenario example

Imagine you have a page where users enter their first name, last name, and date of birth. These fields populate the “users” collection upon successful completion. If a user doesn’t fill out this page, these fields remain empty/unset. Now we know exactly what information we are missing if the user doesn’t complete their onboarding process.

Creating an onboarding check

Create an action block. It’s good to create an action block for this so you can easily reuse the action chain. Name it something like accountCompletionChecker.This block will check if the user has completed their profile by verifying if the required fields (e.g., first name, last name, DoB) are populated. If they are populated, just ignore the block (continue), however, if they aren’t populated, we need to redirect the user to the relevant onboarding page. It could look something like this:

Now that we have that action block, we can start using it. On the home page, create an “on page load” action that calls the newly created action block. And that’s it - this is all you need to do to control your user onboarding process!

Best practices

1.   Use the action block across multiple pages:

Especially if your app has a Nav Bar, users might switch pages quickly before the “on page load” action runs. To handle this, we recommend running the accountCompletionChecker action block on every page accessible from the home page.

2.   App state management

• Create an app state variable called accountCreationCompleted(boolean, non-persistent).
• Start your action chain by checking if accountCreationCompleted is true. If it is, skip the checker actions; if not, proceed with the checks.
• Once the checks are complete and the user has filled in the required information, update the app state to true to avoid unnecessary database checks.

It might look something like this:

3.  Optimize navigation and transitions

When redirecting users to complete their profile, set the transition type to “Instant” and disable the “Allow back navigation” option to prevent users from bypassing the process.

Conclusion

Effective user onboarding guarantees that users provide all necessary information, improving their experience and the app’s functionality.By implementing custom action chains and optimizing navigation in FlutterFlow, you can manage the onboarding process seamlessly, even if users close and reopen the app midway. This method can handle both simple and complex onboarding processes. Some apps might have action chains with more than 10actions, but this approach ensures consistency and completeness.