Build An On-Boarding Screen In Flutter With Hive Logic

7 min readJul 9, 2020

So you have been developing with flutter and you are like you want to make an onboarding screen but you check for articles and what you see are just people using page views and no logic to show the onboarding screen once well you are in luck for stumbling on this article because I’ll show you how to do this and as a bonus how to add a splash screen😉😉.

SplashScreen

So I would start off with the splash screen it is really easy to implement (trust me 😉😉). If you want to follow me as I work on the project do this in your terminal

git clone https://github.com/k1ycee/flutter_examples.git

So like everything in flutter we need a widget here we’ll need a stateful widget, this is because we need the “init state” function and YES it is really important and we’ll also need a function to NAVIGATE to a new screen if not the splash screen effect would be lost 😂😂😂 (I mean if there is no screen to navigate to after like a few seconds then there is no splash screen, literally). Now let’s get to work.

The “init state” function/method

The init state function is going to have a Timer factory method, we’ll import this from “dart: async” don’t worry it is available in the starter project above but if you are in your own project then IntelliSense should do the trick for you (it would import the correct package for you). The Timer function takes two parameters, a DURATION and a CALLBACK function.

We use the duration to set how long we want the splashscreen to last(talking about time), and we use the callback function to tell it what to do after the given duration. Now let’s go to the code

Now what we have here is a screen, it doesn’t have the splash effect yet and we’ll fix this in a second, notice that in the Timer method/function we have a second parameter but this second parameter is an empty function and if you run this code now you’ll just have a screen that displays this

Now you’ll just be on this screen with nothing else happening, and we don’t want our users to be here looking at welcome, so let us fix this now. You’ll see a navigation function just under the init state function, let’s put it in the Timer as the second parameter (instead of the empty function). So to add it we do this

Now this is a splash screen it would navigate to the specified screen in the route function now if you are following along with me and you run the app you should see something like this

Well what you are seeing currently is a Container with no child and this Container is not wrapped with a Scaffold hence blackness 😂😂😂😂😂, well this blackness is where our onboarding screen will reside so just hold on we are going to build it now.

OnBoarding Screen

Before we start we’ll need Hive (package I'll be using for data persistence) so first, we’d have to get these packages

I assume you already know how to use flutter so installing these packages should not be a problem but if it seems to be a problem then I’d suggest you stop here and familiarize yourself enough with flutter then you can come back whenever and continue your reading.

Now let me state this clearly this is not a tutorial on how to use Hive this is just a use case, with this said I won’t be using hive_generator and build_runner essentially these packages just generate code which I won’t be doing but you could check out this tutorial by ResoCoder he really took his time to explain hive. So now let’s move to make the onboarding screen, so the first thing we’ll need to do is to create a list of widgets we’ll need to populate the PageView with(don’t worry I'll explain better as we go on). This is what we’ll be working with

This is just a stateful widget with a PageView inside a Stack but this is not an onboarding screen we need to enter the app properly and this screen is not what we want, for now, we should just have a bunch of pictures we could scroll through

Now let's get to making this a proper onboarding screen that shows only once (when the app is opened for the first time). This is what this code snippet below is doing (partially) it navigates to the new screen when you use the start or skip button but it appears anytime you start the app which is really not a good user experience.

Now we should see something like this

Now any of those options you select takes you to the main app or screen (6 and half a dozen whichever you want to call it). The start button only comes up on the last page and the skip button is constant on all pages. This is basically what is happening here.

Hive Logic 😎😎

This is not a hive tutorial but what you need to know is that hive is used for data persistence. Now we want to use hive to make the app know when the user has seen the onboarding screen so that it remembers and doesn’t display it again. To do this we need to

get the app path
initialize hive in the main function
then we need to open a box, this is basically what we do in hive (we just open and close boxes literally).

Here is the snippet to all I have just said

We need the path so the app knows where to store the records it is keeping and it is very safe to store it in the app’s directory, now we initialize hive with the path since hive is doing the “record-keeping (data persistence)” then we open the box named “onboarding” this is to ensure we don’t get hive errors when the app is running or trying to navigate(gave me a bit of headache too😂). Now let’s get to the logic part of this app, we’ll do this in the splash screen and the onboarding screen too this being said let’s get down to it

ONBOARDING

Now what I have done here is name a box “onboarding” and then in the navigation function that navigates to the main screen we put a key of “status” and value of “true”

box.put('status', 'true');

and this is it anything we’ll do next will be based on the value of this function which is ‘true’ now we add logic to the splash screen to know if it shows the onboarding screen or if it displays the main screen the logic for this would look like this

Observe that I used the ‘status’ key and ‘true’ value to check which screen to display

Timer(Duration(seconds: 3), box.get('status') == 'true' ? elseroute : route);

Now for the finishing touch to put all these together, we go to the main function and also note the order in which things are it is really important

WidgetsFlutterBinding.ensureInitialized();

This must be added to the main function and this should come last for safety reason

runApp(MyApp());

Tried it the other way around and it gave an error which is not good

Now I think you are good to go now if you run the app and get to the main screen close the app and open it again it should go straight to the main screen of the app which should be this

This is as much as I can write but if you have a question please reach out to me here by adding a response or on Twitter.

Conclusion

I have a challenge for you I want you to implement this in the onboarding screen well if it seems too hard send a tweet I’d respond as soon as I see it

Thank you for your time and please don’t fail to hit me up if you need clarification on anything.

Thanks to Crazelu for making me like hive a bit