Flutter One time Intro Screen?

Question

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?

//         


        

Answer 1

I was able to do without using after_layout package and Mixins and instead I have used FutureBuilder.

class SplashState extends State<Splash> {
  Future checkFirstSeen() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool _seen = (prefs.getBool('seen') ?? false);

    if (_seen) {
      return HomeScreen.id;
    } else {
        // Set the flag to true at the end of onboarding screen if everything is successfull and so I am commenting it out
      // await prefs.setBool('seen', true);
      return IntroScreen.id;
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: checkFirstSeen(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          } else {
            return MaterialApp(
              initialRoute: snapshot.data,
              routes: {
                IntroScreen.id: (context) => IntroScreen(),
                HomeScreen.id: (context) => HomeScreen(),
              },
            );
          }
        });
  }
}

class HomeScreen extends StatelessWidget {
static String id = 'HomeScreen';
  @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 {
static String id = 'IntroScreen';
  @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'),
      ),
    );
  }
}

Answer 2

I just had to do exactly the same thing, here's how I did it: First, in my main method, I open the normal main page and the tutorial:

MaterialApp(
        title: 'myApp',
        onGenerateInitialRoutes: (_) => [MaterialPageRoute(builder: mainPageRoute), MaterialPageRoute(builder: tutorialSliderRoute)],
)

...and then I use a FutureBuilder to build the tutorial only if necessary:

var tutorialSliderRoute = (context) => FutureBuilder(
      future: Provider.of<UserConfiguration>(context, listen: false).loadShowTutorial()  // does a lookup using Shared Preferences
          .timeout(Duration(seconds: 3), onTimeout: () => false),
      initialData: null,
      builder: (context, snapshot){
        if (snapshot.data == null){
          return CircularProgressIndicator();   // This is displayed for up to 3 seconds, in case data loading doesn't return for some reason...
        } else if (snapshot.data == true){
          return TutorialSlider();   // The Tutorial, implemented using IntroSlider()
        } else {
          // In case the tutorial shouldn't be shown, just return an empty Container and immediately pop it again so that the app's main page becomes visible.
          SchedulerBinding.instance.addPostFrameCallback((_){Navigator.of(context).pop();});
          return Container(width: 0, height: 0);
        }
      },
    );

Also, I think the tutorial should be shown again in case the user does not finish it, so I set only set the variable showTutorial to false once the user has completed (or skipped) the tutorial:

class TutorialSlider extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TutorialSliderState();
}

class TutorialSliderState extends State<TutorialSlider> {
  ...
  @override
  Widget build(BuildContext context) => IntroSlider(
      ...
      onDonePress: (){
        Provider.of<UserConfiguration>(context, listen: false).setShowTutorial(false);
        Navigator.of(context).pop();
      }
  );
}

Answer 3

I took a different approach. I agree with the other answers that you should save your isFirstRun status via SharedPreferences. The tricky part then is how to show the correct widget in such a way that when you hit back you close out of the app correctly, etc. I first tried doing this by launching a my SplashWidget while building my HomePageWidget, but this turned out to lead to some weird Navigator errors.

Instead, I wound up calling runApp() multiple times with my different widget as appropriate. When I need to close the SplashWidget, rather than pop it, I just call runApp() again, this time with my HomePageWidget as the child property. It is safe to call runApp() multiple times according to this issue, indeed even for splash screens.

So it looks something like this (simplified obviously):

Future<void> main() async {
  bool needsFirstRun = await retrieveNeedsFirstRunFromPrefs();

  if (needsFirstRun) {
    // This is will probably be an async method but no need to
    // delay the first widget. 
    saveFirstRunSeen();
    runApp(child: SplashScreenWidget(isFirstRun: true));
  } else {
    runApp(child: HomePageWidget());
  }
}

I have an isFirstRun property on SplashScreenWidget because I can launch it in two ways--once as a true splash screen, and once from settings so that users can see it again if they want. I then inspect that in SplashScreenWidget to determine how I should return to the app.

class SplashScreenWidget extends StatefulWidget {
  final bool isFirstRun;

  // <snip> the constructor and getState()
}

class _SplashScreenWidgetState extends State<SplashScreenWidget> {
  // This is invoked either by a 'skip' button or by completing the
  // splash screen experience. If they just hit back, they'll be
  // kicked out of the app (which seems like the correct behavior
  // to me), but if you wanted to prevent that you could build a
  // WillPopScope widget that instead launches the home screen if
  // you want to make sure they always see it.
  void dismissSplashScreen(BuildContext ctx) {
    if (widget.isFirstRun) {
      // Then we can't just Navigator.pop, because that will leave
      // the user with nothing to go back to. Instead, we will
      // call runApp() again, setting the base app widget to be
      // our home screen.
      runApp(child: HomePageWidget());
    } else {
      // It was launched via a MaterialRoute elsewhere in the
      // app. We want the dismissal to just return them to where
      // they were before.
      Navigator.of(ctx).pop();
    }
  }
}

Answer 4

Use shared_preferences:

Full code:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  var prefs = await SharedPreferences.getInstance();
  var boolKey = 'isFirstTime';
  var isFirstTime = prefs.getBool(boolKey) ?? true;

  runApp(MaterialApp(home: isFirstTime ? IntroScreen(prefs, boolKey) : RegularScreen()));
}

class IntroScreen extends StatelessWidget {
  final SharedPreferences prefs;
  final String boolKey;
  IntroScreen(this.prefs, this.boolKey);

  Widget build(BuildContext context) {
    prefs.setBool(boolKey, false); // You might want to save this on a callback.
    return Scaffold();
  }
}

class RegularScreen extends StatelessWidget {
  Widget build(BuildContext context) => Scaffold();
}

Answer 5

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.

Answer 6

You need to store boolean value whenever app is launched first time. For this you need to use shared preferences.

First we create custom class for shared preferences, So you can access it from any page.

import 'package:shared_preferences/shared_preferences.dart';
 
class MySharedPreferences {
  MySharedPreferences._privateConstructor();
 
  static final MySharedPreferences instance =
      MySharedPreferences._privateConstructor();
 
  setBooleanValue(String key, bool value) async {
    SharedPreferences myPrefs = await SharedPreferences.getInstance();
    myPrefs.setBool(key, value);
  }
 
  Future<bool> getBooleanValue(String key) async {
    SharedPreferences myPrefs = await SharedPreferences.getInstance();
    return myPrefs.getBool(key) ?? false;
  }
 
}

Then we need to check boolean value at every launch of application. If value is false then you must show intro screen otherwise show home screen.

import 'package:flutter/material.dart';
import 'my_shared_preferences.dart';
import 'intro.dart';
import 'home.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyAppState();
  }
}
 
class MyAppState extends State<MyApp> {
  // This widget is the root of your application.
 
  bool isFirstTimeOpen = false;
 
  MyAppState() {
    MySharedPreferences.instance
        .getBooleanValue("firstTimeOpen")
        .then((value) => setState(() {
              isFirstTimeOpen = value;
            }));
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: isFirstTimeOpen ? Home() : Intro());
  }
}

Also store boolean value true in intro screen so intro screen is not shown everytime. You can also refer example at here.

 MySharedPreferences.instance.setBooleanValue("firstTimeOpen", true);