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

Viewed 1435

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

Example

2 Answers

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);
Related