Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter One time Intro Screen?

I have an intro screen for my app, but it shows every time I open the app, I need to show that for the 1st time only.

How to do that?

//THIS IS THE SCREEN COMES 1ST WHEN OPENING THE APP (SPLASHSCREEN)  class SplashScreen extends StatefulWidget {   @override   _SplashScreenState createState() => _SplashScreenState(); }  class _SplashScreenState extends State<SplashScreen> {   @override   void initState() {     super.initState();      //After 2seconds of time the Introscreen will e opened by bellow code     Timer(Duration(seconds: 2), () => MyNavigator.goToIntroscreen(context));   }    //The below code has the text to show for the spalshing screen   @override   Widget build(BuildContext context) {     return Scaffold(       body: new Center(         child: Text('SPLASH SCREEN'),       ),     );   } } 

Every time this screen opens the intro screen with 2 seconds delay. but I want for the first time only How to do that with sharedpreference??

Please add the required code.

like image 622
Rajesh Jr. Avatar asked Jun 02 '18 06:06

Rajesh Jr.


People also ask

How do I show my introduction screen once in flutter?

If you wish to show the intro screen only for the first time, you will need to save locally that this user has already seen intro. Thanks to Ben B for noticing the incorrect use of delay in initState . I had used a delay because sometimes the context is not ready immediately inside initState .

How do you make a splash screen in flutter?

To do so, open the Flutter app's Xcode project by typing open ios/Runner. xcworkspace from the root of your app directory. Then select Runner/Assets. xcassets from the Project Navigator and drop in the desired images to the LaunchImage image set.

How do I get rid of initial white screen in flutter?

On the right in the properties, there is the background attribute. Clicking on this and choosing custom will allow you to define the RGB value you'd like the colour of the white screen to now appear as. Running your app on Android and iOS will now no longer show the annoying white screen.


1 Answers

If you wish to show the intro screen only for the first time, you will need to save locally that this user has already seen intro.

For such thing you may use Shared Preference. There is a flutter package for Shared Preference which you can use

EDITED:

Please refer to the below complete tested code to understand how to use it:

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.blue,       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 second 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('This is the IntroScreen'),       ),     );   } } 

Thanks to Ben B for noticing the incorrect use of delay in initState. I had used a delay because sometimes the context is not ready immediately inside initState.

So now I have replaced that with afterFirstLayout which is ready with the context. You will need to install the package after_layout.

like image 182
Arnold Parge Avatar answered Sep 20 '22 12:09

Arnold Parge