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 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(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 createState() => TutorialSliderState();
}

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