Opening a screen only once - Flutter

There are times when you need to open some screens like onboarding screen or Intro screen only once, i.e., only for the first time when the user opens an application.

How can you do that?

The best way to solve this issue is with the use of Shared Preferences and after_layout. Shared preference helps in storing the data locally, i.e., in this case, it will save that whether the user has visited this page or not whereas after_layout brings functionality to execute code after the first layout of a widget has been performed, i.e., after the first frame has been displayed.


There is already a package available named shared_prefrences to help accomplish this task. The package is maintained by the official Flutter developer team.

About Shared Preferences

The equivalent of shared_prefrence package in native iOS development is known as NSUserDefaults and Shared Preferences in Android
The shared_prefrences acts as a persistent store for storing simple data. And should definitely not be used to store the crucial data as both ios and android do not guarantee that writes it will be persisted to disk after returning.

About After Layout

Sometimes context is not ready immediately inside initState, so we use afterfirstlayout to execute the code after the context is available. For more info, you can visit here

Add dependencies

 dependencies:  
  shared_preferences: ^0.5.7+3  
  after_layout: ^1.0.7+2  

Import statement

 import 'package:shared_preferences/shared_preferences.dart';  

 import 'package:after_layout/after_layout.dart';  

Code for Opening the screen only once

 import 'dart:async';  
 import 'package:after_layout/after_layout.dart';  
 import 'package:flutter/material.dart';  
 import 'package:shared_preferences/shared_preferences.dart';  
 void main() => runApp(new MyApp());  
 class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
   return new MaterialApp(  
    color: Colors.red,  
    home: new Splash(),  
   );  
  }  
 }  
 class Splash extends StatefulWidget {  
  @override  
  SplashState createState() => new SplashState();  
 }  
 class SplashState extends State<Splash> with AfterLayoutMixin<Splash> {  
  Future checkFirstSeen() async {  
   SharedPreferences prefs = await SharedPreferences.getInstance();  
   bool _seen = (prefs.getBool('seen') ?? false);  
   if (_seen) {  
    Navigator.of(context).pushReplacement(  
      new MaterialPageRoute(builder: (context) => new Home()));  
   } else {  
    await prefs.setBool('seen', true);  
    Navigator.of(context).pushReplacement(  
      new MaterialPageRoute(builder: (context) => new IntroScreen()));  
   }  
  }  
  @override  
  void afterFirstLayout(BuildContext context) => checkFirstSeen();  
  @override  
  Widget build(BuildContext context) {  
   return new Scaffold(  
    body: new Center(  
     child: new Text('Loading...'),  
    ),  
   );  
  }  
 }  
 class Home extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
   return new Scaffold(  
    appBar: new AppBar(  
     title: new Text('Hello'),  
    ),  
    body: new Center(  
     child: new Text('This is the main page'),  
    ),  
   );  
  }  
 }  
 class IntroScreen extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
   return new Scaffold(  
    appBar: new AppBar(  
     title: new Text('IntroScreen'),  
    ),  
    body: new Center(  
     child: new Text('Onboarding Screen'),  
    ),  
   );  
  }  
 }  

Explanation

There are in total of three main screens in the example Splash Screen named Splash, Intro Screen that is to be displayed only once, and Home Screen, which is the main screen.


The AppWidget has Splash as a home argument, i.e., the first screen that is going to open in this application is Splash screen, and all the checks are going to be done here only.


Here we make a variable of the type boolean named _seen to store the value true if the screen is opened once and false if the screen is not opened till now. Now We perform checks on _seen if it is found true we open Home screen else we open Intro Screen and set _seen as false so that from next time it will not open again.

Conclusion

Time to look at what we learned. Shared Preferences is a plugin i.e used to store the locally and can be helpful in storing the data such as whether some screen is opened till now or not also After Layout is a plugin that is used to execute the piece of code after the context of the layout is readily available. However, if you liked reading this article consider bookmarking this.


Also, Let me know which plugin you use the most in the Flutter.