Tuesday, June 9, 2020

Walk through screen - Flutter UI


In this article, we are going to learn how we can design a Walkthrough screen UI using PageView and SliderTile widget in Flutter.

What is a walkthrough screen?

For very first, when launching some apps, you may have encountered a series of tutorial screens. These tutorial screens are collectively referred to as walkthrough screens. It's a common practice for mobile apps to step the user through a multi-screen tutorial where all the features are demonstrated.

Code Part


SliderModel


First, we will code a model for the slider i.e used to get and set the values. The code for the slider_model is given below.

In the above code, we made a list of the type SliderModel to store contents for the three screens which are going to show.

Main.dart


The code for main.dart is

In the above code, I have used PageView and SliderTile Widget and used the page controller to navigate between the pages.

Assets

For assets, you can use any image and don't forget to mention your asset in pubspec.yaml
file.

For the full source code for the above application, you can visit my GitHub account from here.

Conclusion 

Time to look at what we actually learned. A walkthrough screen is helpful when you need to give insights about the features of the application or provide a tutorial to the user and we learnt how we can implement it using the code in Flutter. However, if you prefer this article, consider bookmarking this URL to come at any later point of time if required.

For more Flutter UI's, Widgets and programming related updates check out the blog. 
Previous Post
Next Post

post written by:

Hi, Navjyot Singh is a coder, content maker and a freelance developer who's pursuing an undergraduate Engineering degree in Computer Science. He started out as a web developer but later picked up the mobile as his favourite platform to develop applications. A Writer by day and coder by night is loathed to discuss himself as the third person but can be persuaded to do so from time to time.

0 comments: