Written by Adrian Kąkol
Software Engineer Gdańsk
Published December 29, 2020

Code with us #01 – Onboarding UI for Beginners

In this episode we will build together an onboarding component, which introduces users to functionalities of your application. Onboarding UI is a typical way to show advantages of your app as well as to inform users about the benefits it gives to them.

Episode 1 - Onboarding UI baner

You can watch the video instead of reading the article, or use them both:

1. Preparation – Flutter tutorial

In each episode we start from scratch by creating a new app and removing the boilerplate as shown in the following paragraphs.

First things first, to follow the series you have to have Flutter installed. To do so, please follow the official guideline: https://flutter.dev/docs/get-started/install
Secondly, create an application using the terminal. A new application can also be created using your favourite IDE’s UI. The command used below creates an application structure in the directory from which you are calling the command. To create an app type in the terminal:

Next, remove the default boilerplate from the file onboarding_ui/lib/main.dart. Currently the test directory would not be needed so you can remove the onboarding_ui/test/ folder. 

At the end, in order to use images on the onboarding screens which we will build, create the assets directory assets/images in the root directory and define it in the onboarding_ui/pubspec.yaml file. Add the following lines to the file under the flutter key:

Download the images package from https://static.schibsted.pl/kudify/onboarding_images.zip and unzip into the onboarding_ui/assets/images directory. We will use them to create nicely looking onboarding screens.

This is how the project’s structure should look like after all steps:

Project tree

Now we are ready to start coding!

2. Starting point – Flutter tutorial

Within this part we will create a basic structure of the app, which will be extended in a part 3.

In the onboarding_ui/lib/main.dart file define the main function and the App widget as follows. Keep in mind that the app will not work yet due to the missing OnboardingScreen widget:

Now, create the file onboarding_ui/lib/screens/onboarding_screen.dart in which we will define the functionality of an onboarding component.
In that file create the stateless widget named OnboardingScreen:

and import the newly created widget in the onboarding_ui/lib/main.dart file by adding the import on top of the file:

At this point the application displays the text “Onboarding” without any styles yet as shown on the screenshot.

flutter-tutorial

3. Slides implementation – Flutter tutorial

Now let’s create actual onboarding slides with an animated indicator and a ‘continue’ button.

First, define the list of slides with different texts and images:

Now add the page controller and current page number variable to have a control over the slides which we will add in a minute.
First, add the OnboardingScreen class which extends StatefulWidget and change the old OnboardingScreen class to the _OnboardingScreenState. Add a controller variable and current page.

Now let’s build a scaffold with slides and with the changePage method to change the current slide number.

You might have noticed that we used a word const in const Color(0xFF424242). The reason is that flutter will create only one instance of the variable. It is a proper way from the performance perspective. In the following article you can find a full explanation: https://news.dartlang.org/2012/06/const-static-final-oh-my.html
The screen will be divided into two parts with Expanded class. Giving them flex: 3 and  flex: 1 properties they cover 3/4 and 1/4 of the screen.

At this point the app allows you to swipe slides and looks like on the screenshot below.

Kudify - onboarding screen 3

 

Now let’s add an animated current slide indicator and the continue button into the children array. Again we are using the Expanded class with a flex property as mentioned above. The following code also renders a text on the button conditionally.

Now we have to define the _buildDots method which renders the animated indicator. Add this method to the _OnboardingScreenState class.
Please notice the usage of a named parameter {int index} in the example below. To read more about named parameters, follow this article: https://dart.dev/guides/language/language-tour#parameters

In the result your app should look like on the screenshot.

Kudify - onboarding screen 3

 

Finally, you have built a fully functional onboarding screen! Well done.

To learn more about classes used in this article, follow the official documentation:

Link to the final version of the app with implemented onboarding:
https://github.com/KrzysztofLen/Flutter_crash_course/tree/master/onboarding_part_1

Thank you for following this episode of our Flutter tutorial.
Stay tuned for the next episode, in which we will build together a grid and a list view to display a list of people.

Coding – Krzysztof Len
Video – Robert Fijałkowski

Written by Adrian Kąkol
Software Engineer Gdańsk
Published December 29, 2020