Flutter onboarding screens with provider

In today’s competitive app market, capturing and retaining user attention is vital for success. One effective way to engage users right from the start is by incorporating captivating and informative introductory screens into your app. Flutter, the popular cross-platform framework, provides developers with a versatile toolkit for creating beautiful and interactive user interfaces. When combined with the power of Provider, a state management solution, Flutter becomes an even more potent tool for building seamless and dynamic intro screens. In this article, we will explore how to leverage the Flutter framework along with Provider to create captivating intro screens that guide users through the app’s features, promote user engagement, and ensure a delightful onboarding experience. Whether you are a seasoned Flutter developer or a beginner looking to enhance your app’s initial user experience, this article will equip you with the knowledge and tools necessary to create stunning intro screens with ease. Ok Let’s Start!

First of all create a new flutter project and add following dependencies

we will explore the versatile uses of several crucial dependencies that significantly enhance the user onboarding experience. First and foremost, we will dive into the application of the Provider package, a robust state management solution. With Provider, developers can effortlessly manage and share state data across various screens, ensuring a seamless and synchronized user interface. By utilizing Provider, we can eliminate the hassle of manually passing data between screens and instead focus on delivering an engaging onboarding experience.

While discussing the dependencies, it is important to note that the get_it package, which is commonly used for singleton creations, is not necessary for our intro screens. Therefore, it can be excluded from our discussion.

One of the primary objectives of intro screens is to determine whether the user is new or returning. To accomplish this, we will employ the shared_preferences package. By utilizing shared_preferences or any other offline database, we can track and persist information regarding whether the user has previously viewed the intro screens. This enables us to provide a personalized onboarding experience by tailoring subsequent interactions based on the user’s familiarity with the app.

To create visually appealing intro screens, it is essential to prepare the images that will be displayed to the user. These images should be relevant, eye-catching, and effectively communicate the app’s key features or value proposition. Once you have selected the appropriate images, they need to be added to the asset folder in your Flutter project. The asset folder is where you store static resources such as images, fonts, or configuration files.

To ensure that Flutter recognizes and includes these images in the app, you must also add them to the pubspec.yaml file. The pubspec.yaml file is a configuration file that describes the project’s dependencies, assets, and other metadata. Within this file, you will specify the file paths or directories where your intro screen images are located. By adding the image assets to the pubspec.yaml file, Flutter will know to include them in the app’s build process and make them accessible for display on the intro screens. This straightforward process ensures that your images are properly integrated into the app, ready to captivate and engage users during their onboarding experience.

Then I created my main.dart file as follows.

First I have put Multi Provider here because we need to add more providers in future. For that reason I have put Multi provider for the provider creation. We need only one provider to handle intro screens. That is page provider which type is ChangeNotifierProvider. It will create Page Provider at the app initialisation.

Consumer get the page provider updates and rebuild itself with the updated values. So I have used it to navigate user/existing users to their related screens.
Let’s create page provider.

First we need to track down following information using the provider.

1. current page number
2. Is existing user or not
3. Loading shared preferences

I have created checkFresher function to check the user is existing user or not.

checkFresher() async {
    isLoading = true;
    notifyListeners();
    prefs = await SharedPreferences.getInstance();
    if (prefs.getBool('isFresher') ?? true) {
      isFresher = true;
    } else {
      isFresher = false;
    }
    isLoading = false;
    notifyListeners();
}

we need to keep loading into true until the shared preferences loaded. After that it need to be false. Here It will check the stored value if user is new or not. “notifyListeners()” will update the provider values and rebuild the consumer according to the updated values of the provider.

The “scrollPage” function will update the current page of the controller of intro screens. We need it to check if user is navigated to the last page or not.Now we have our provider and main screens. Let’s create intro screens.

First I have created Intro component for scrolling purpose inside the page view.

Inside the intro component all information is configurable.It is a container with background image. It is a simple component for the intro screen. There is no complex logic here. At last I have created main Intro screen as follows.

First I have created a Stack to add next button and scroll indicator on the pageview. Pageview scrolls Intro components with differnt data. After that next button and indicators at the bottom of the screen.

final PageController controller = PageController();
    controller.addListener(() {
      context.read<PageProvider>().scrollPage(controller.page);
    });

The page controller is responsible for obtaining the current value of the page in the app. A listener is set up to track changes in the page value and update the corresponding provider’s page value accordingly. When the page provider receives the updated value, it calls notifyListeners(), which triggers a rebuild of the consumer widget. As a result, the consumer widget can access the updated values from the provider and reflect the changes in the UI.

final SharedPreferences pref =
                        await SharedPreferences.getInstance();
                    pref.setBool('isFresher', false);
                    if (controller.page != 2) {
                      controller.nextPage(
                          duration: const Duration(milliseconds: 1000),
                          curve: Curves.easeInOut);
                    }

Inside next button, if the user pressed once the next button It will track the user is not a fresher anymore by adding false boolean value to the shared preferences. Next button should not clickable after the page value is equal to 2 . That is the reason to put a if condition there.

Indicator need to be updated according to the current page value. So I have added “context.watch<PageProvider>().page”. It will get the updated page value from the page provider.

So All completed, please run the app. Final output will be shown as follows.

Hope you get the idea about , Creating Intro screens using the provider. Full source is available here https://github.com/Dineth95/flutter_app_inro