Hire the author: Oshinowo A
Introduction
Creating an amazing experience with a flutter onboarding screen is best when users launch your mobile app for the first time on their device. The onboarding experience of a mobile application shouldn’t be whack, but appear good to the sense of a customer and help with explaining the steps that the user has to do in the app.
With Flutter, this is being made possible and very easy to optimize the onboarding process of a banking app. In this guide, we are going to learn how to do the following in our flutter walkthrough screen:
- How to set up a flutter project.
- Add responsiveness to the flutter app.
- Customize the flutter intro screen with background images and walkthrough texts.
Here is the flutter onboarding screen source code on GitHub. The open-source banner image of this article is fetched from dribbble.com / youtube.
Why Onboarding Is So Important for Banking Apps
Onboarding is the process of familiarising customers with your new product and encouraging them to sign up and use it. Creating a good first impression is very important because it is the factor that makes your user stick around your app and make further transactions. Here are the reasons why a walkthrough screen is important for banking apps:
- It helps in transforming a mobile user from a prospect user to a potential customer. This is one of the first important factors that makes a customer happy and an engaged user.
- The key aim is to make sure users achieve what they set out to accomplish with your app — quickly and hassle-free.
- It makes customers feel secure and give them insights on why they need this information and how they would be using it.
- By providing an onboarding screen in your banking app, you allow users to explore the features without registration.
- It establishes trust in your customers.
- Helps them understand why you need their personal data incase.
Glossary
Flutter: Flutter is an open-source UI software development kit created by Google. It is being used to develop cross-platform applications for Android, iOS, Linux, Mac, Windows and the web from a single codebase.
Dart: Dart is a programming language designed for client development, such as for the web and mobile apps.
Onboarding Screen: An onboarding screen is like a walkthrough, aimed to introduce what an app does to a user and of course how to use it.
Step by Step Procedure
Setup
To start creating your flutter onboarding screen, you need to install the necessary tools needed to develop the banking app.
The first tool you would need is an IDE or code editor. Android Studio and Visual Studio Code are the two most popular and easy to use software that you can use to create your flutter app. In this guide, we would be using the Visual Studio Code editor for our project.
After installing VSCode on your device, click on the extension’s icon to access the VSCode extensions marketplace.
In the search bar at the top, search for the flutter plugin extension and click install. This extension is very important to install because it gives us the ability to create our flutter app and also get the starting flutter app template we need to start our app.
After installing the flutter extension, the dart extension is also installed by default because the flutter framework depends on the dart programming language to function.
Installing Flutter
To install the flutter starter code and files created by the flutter team, press CTRL + SHIFT + P on Windows and CMD + SHIFT + P on Mac to display all commands related to your code editor. Search or navigate to “Flutter: New Project” to install a new flutter project.
Select Application as the flutter template to be installed. Then, select the folder in which to download and install your flutter project into. It is recommended that you select a folder that would be accessed by you at any time to keep track of your projects.
And finally, add the desired name to save your flutter app.
You can also run the following command in your terminal to create a new project:
flutter create flutter_banking_appOnce this is being completed, Flutter will provide you with a list of files and folders needed to start developing your app. Among these files contains your android and ios folder which means that you are developing your app for two different platforms with a single codebase.
In your “lib” folder, navigate to the main.dart file. This is the starting point of your flutter app. Learn more on how to set up your flutter app with VSCode.
Adding Necessary Assets and Plugins to the pubspec.yaml File
For us to create our onboarding screen easily, we need to add some external plugins created by other developers to make creating our flutter app easier. The list of plugins we would be using are:
To enable us to add images to our flutter onboarding screen, we have to add an assets folder to the root directory of our flutter project. And then, add the path in our pubspec.yaml file.
After adding these to your pubspec.yaml file, navigate to your terminal and run the following command to download the external extensions from the internet:
flutter pub getUpdating the main.dart File
Moving forward, we update the main.dart file to include the pages of our app and also make use of the screen util package to make our app more responsive to different devices.
Adding Customized Onboarding Screens
Since the state of the onboarding screen is likely to change, we start the file with a stateful widget. Check here to learn more about stateful and stateless widgets.
Create a list of custom pages/models and add them in a method that would return a list of type Widget, before the build method.
Configuring the Flutter Onboarding Screen
To display your custom screens on your app, you need to wrap the widget with the IntroductionScreen widget.
Now, let’s go over the properties of the Introduction screen widget to configure and customize our app to the desired taste:
rawPages: It expects a list of custom widgets. It allows you to define/create your own customized screen, instead of using a PageViewModel widget. This is being used if you want to add a background image to your onboarding screens.
onDone: This property expects an anonymous function. This is used to navigate to a particular screen when a user has finished viewing the onboarding screens.
done: This expects a widget that defines how the onDone element that would be clicked by the user should look like. It could be a Button widget, an Icon widget or a Text widget.
next: The next property also expects a widget to be passed to it. It also defines how the element of moving to the next onboarding screen (if it is more than one) will look like.
dotsDecorator: This accepts a DotsDecorator widget, used for customizing the dots colour, size and spacing.
globalBackgroundColor: The globalBackgroundColor allows you to set a background colour for your screens. But, it is only visible when a page has a transparent background colour.
Note: The done, onDone and next properties are crucial for the onboarding screens to work. Else it crashes the app.
Completing the main.dart File
Lastly, we need to add the Flutter Shared Preference to store temporary data in our app. This is important to add, so as not to keep on showing an existing user the onboarding screens every time the app is being launched.
With this, we can add temporary data that checks if the user installed the app on their device for the first time. And redirect the user if the user is an existing user.
Running Our Application
To run our application on a mobile device, run the following command:
flutter runNow you can guide your app users to make use of your app effectively and take advantage of all the features you provide.
Learning Tools
- Flutter Docs: This is a comprehensive reference provided by the Flutter development team. It is a guide to go through before searching elsewhere.
- Stack Overflow: This is another useful online platform where a community of developers help learn, share and fix programming problems.
- Pub: This consists of packages for Dart and Flutter apps.
Learning Strategy
To be able to complete this Flutter project, you should have a basic knowledge of how flutter and dart programming works and be able to use the above tools. I also recommend the use of google search in case you get stuck at any point.
Reflective Analysis
Onboarding screens optimized for banking apps is great especially when the design and user experience is smooth and align with how the features of your app can solve a problem for the incoming user.
Ultimately, onboarding for the banking app is very similar to the onboarding of other apps in various verticals. However, being a financial transaction mobile app, a sense of security comes as a topmost priority. The way you establish your brand and security make your customer put trust in your app.
Conclusion
The step-by-step guide shows you how to create and customize a flutter onboarding screen to be optimized for banking apps. If you think someone else could benefit from this guide, kindly spread the word and share.
Nice article, precise, clear and easy to follow even for beginners
Obua expanded on this a bit more in LD Slack … moving that here:
This is great as the user is able to get the brief insights of the app through the onboarding screen information, though seems like the onboarding screen shows up Everytime the app is launched by the user, you can confirm this with a built of the app on a mobile device.
For future directions cases, as a project grows, new features comes in, you could use this approach of on boarding to give a one time insights of the new features but this time not as on boarding screens but popup modals or a tour kind of interactive walk through of the features.
Hello LD Talent Blog,I read your blog and Found it interesting ang got a great knowledge about Fintech companies and their Banking technologies and i have had a great interaction with one of the similar kinds of Fintech companies and how they have been a key factor in growing economy and hence had a great user experience out there, I would definitely like to suggest you to check it out for more knowledgeable content.