Flutter Minimalism: Onboarding Logic

Minimalist approach for your Flutter app to check if it was freshly installed and downloaded

About Flutter Minimalism Guide

The guide aims to help Flutter developers to implement common app use-cases & scenarios with reduced complications and less overhead of

1. Less waste of time explanations, and more into solving the problem
2. Less usage of abstraction and less over engineered architectures
3. Less complicated code samples & outdated libraries

What Flutter Minimalism is not about

The guide won’t go explaining Dart/Flutter concepts like asynchronous programming or Flutter Widgets basics, as this is just a guide not a tutorial material.

The Use-case: Onboarding Logic

Most apps nowadays offer their first time user (freshly installed apps) an Onboarding Journey which welcomes help users to get familiar with the app. In this tutorial series, I will demonstrate how to implement this flow in simple fashion.

Let’s say we want the to distinguish if the user just freshly downloaded the app from the App Store or Google-Play and opened the app for the first time, then it will take him to the Onboarding Page, otherwise if the user open the app a second time, or third time..etc it will take him to the Home Page instead

Logic Flow

The Implementation

Plugins

First we need our app to store a simple persistent flag on the device that will be checked whenever the user open the apps to demonstrate whether the app was fresh/first time installed.

The simplest way to do this is using the shared_preferences library. Add it to your pubspec.yaml, save the file and reload the package.

Make sure if you are already running/debugging the app, then perform a restart or stop and rerun the app so the plugin generate the required binaries to run correctly.

The Project

For simplicity the project will consist only of 2 files inside Lib folder

• main.dart
• shared_preferences_manager.dart

Lib folder files

shared_preferences_manager.dart

Create the shared_preferences_manager.dart inside the lib folder, and add the following class that will contain a method to fetch and store the isFreshlyInstalled flag in the device shared preferences storage

import 'package:shared_preferences/shared_preferences.dart';

class SharedPreferencesManager {
//Unique key that can be used to identify is feshly installed flag
static const String IS_FRESHLY_INSTALLED_PREFERENCE_KEY =
"is_freshly_installed";

Future<bool> isFreshInstalled() async {
var pref = await SharedPreferences.getInstance();
bool isFreshlyInstalled = pref.getBool(IS_FRESHLY_INSTALLED_PREFERENCE_KEY);
if (isFreshlyInstalled == null) {
//null means if fresh installed and flag wasn't stored before
//so we save false into pref incase this flag is needed again or else where after fresh installation
return await pref.setBool(IS_FRESHLY_INSTALLED_PREFERENCE_KEY, false);
} else {
return isFreshlyInstalled;
}
}
}

main.dart

For simiplicity, we gona put the remaining of the widgets in the main.dart file

import 'package:check_is_fresh_install/shared_preferences_manager.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
//By default makes your app always load the StartUpWidget
home: StartUpWidget(),
);
}
}
class StartUpWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder<bool>(
future: SharedPreferencesManager().isFreshInstalled(),
builder: (context, isFreshInstalledSnapshot) {
if (isFreshInstalledSnapshot.hasData) {
if (isFreshInstalledSnapshot.data) {
//You can return for example your onboarding widget/page
return OnboardingPage();
} else {
//You can return your HomePage() or whatever widget/page
return HomePage();
}
} else {
//For good user Experiance you can show Your App Logo/loading Screen
return Center(
child: CircularProgressIndicator(),
);
}
}),
),
);
}
}
class OnboardingPage extends StatelessWidget {
const OnboardingPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Text("My Onboarding Page"),
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Text("My Home Page"),
),
);
}
}

The source code

The source code is also available on the repo here

Feedback

Share your feedback on what should I write about for Flutter Minimalism Series