How to add tutorial to a flutter app when we launch it for the first time

Question

Anyone knows how to add tutorial when the app is launched for the first time in flutter? Example is attached as an image.

Answer 1

You can use tutorial_coach_mark library,like:

import 'package:flutter/material.dart';
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';

void showTutorial() {
    TutorialCoachMark(
      context,
      targets: targets, // List<TargetFocus>
      colorShadow: Colors.red, // DEFAULT Colors.black
       // alignSkip: Alignment.bottomRight,
       // textSkip: "SKIP",
       // paddingFocus: 10,
      finish: (){
        print("finish");
      },
      clickTarget: (target){
        print(target);
      },
      clickSkip: (){
        print("skip");
      }
    )..show();
  }

To be able to use it for the first time you need the shared_preferences package:

SharedPreferences prefs = await SharedPreferences.getInstance();
var watchedIntro=prefs.getBool('watchedIntro')??false;
if(!watchedIntro)

and when the tutorial ended set watchedIntro to true:

await prefs.setBool('watchedIntro', true);

Answer 2

You can try out this package, tutorial_coach_mark.