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 AndroidThe 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 hereAdd 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.
0 comments: