Tutorial

index:

• Introduction
• Links
• Define functions
• Define tutorial targets
• Set the initials of page
• Set show tutorial in a button

Introduction:

tutorial can be useful for smoothly informing your users when to perform certain actions.

Links:

https://flutterap.com/
https://flutterap.features.com/
https://docs.flutterap.com/
https://github.com/flutterap59/flutterap/

Tutorial is prepared by the flutter code in admin panel and tutorial_coach_mark package is added in pubspec.yaml 's dependencies
 and is used as:
 

 Define functions to creat tutorial:

  void _showTutorial() {
    _tutorialCoachMark.show(context: context);
  }

  void _createTutorial() {
    _tutorialCoachMark = TutorialCoachMark(
      targets: _createTargets(),
      colorShadow: InitialStyle.secondaryDarkColor,
      textSkip: "Skip",
      paddingFocus: InitialDims.space2,
      // opacityShadow: 0.8,
      pulseEnable: false,
    );
  }

 Set tutorial targets:

  List<TargetFocus> _createTargets() {
    List<TargetFocus> targets = [];
    targets.add(
      TargetFocus(
        enableOverlayTab: true,
        identify: "descriptionKey",
        keyTarget: _descriptionKey,
        alignSkip: Alignment.topRight,
        contents: [
          TargetContent(
            align: ContentAlign.top,
            builder: (context, controller) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[_tutorialText("It is title card of page")],
              );
            },
          ),
        ],
        shape: ShapeLightFocus.RRect,
      ),
    );
    targets.add(
      TargetFocus(
        enableOverlayTab: true,
        identify: "introCardKey",
        keyTarget: _introCardKey,
        alignSkip: Alignment.topRight,
        contents: [
          TargetContent(
            align: ContentAlign.top,
            builder: (context, controller) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  _tutorialText(
                    "It is intro card of tutorial",
                  )
                ],
              );
            },
          ),
        ],
        shape: ShapeLightFocus.RRect,
      ),
    );
    targets.add(
      TargetFocus(
        enableOverlayTab: true,
        identify: "informationKey",
        keyTarget: _informationKey,
        alignSkip: Alignment.topRight,
        contents: [
          TargetContent(
            align: ContentAlign.top,
            builder: (context, controller) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  _tutorialText(
                    "It is imformation button of card",
                  )
                ],
              );
            },
          ),
        ],
        shape: ShapeLightFocus.Circle,
      ),
    );
    targets.add(
      TargetFocus(
        enableOverlayTab: true,
        identify: "imageCardKey",
        keyTarget: _imageCardKey,
        alignSkip: Alignment.topRight,
        contents: [
          TargetContent(
            align: ContentAlign.top,
            builder: (context, controller) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  _tutorialText(
                    "It is an image card",
                  )
                ],
              );
            },
          ),
        ],
        shape: ShapeLightFocus.RRect,
      ),
    );

    return targets;
  }

  _tutorialText(String text) {
    return FxText(
      text,
      tag: Tag.h1,
      isBold: true,
      color: InitialStyle.primaryDarkColor,
    );
  }

set the initials of page:

class _FcTutorialState extends State<FcTutorial> {
  late TutorialCoachMark _tutorialCoachMark;

  final GlobalKey _descriptionKey = GlobalKey();
  final GlobalKey _introCardKey = GlobalKey();
  final GlobalKey _imageCardKey = GlobalKey();
  final GlobalKey _informationKey = GlobalKey();

  @override
  void initState() {
    _createTutorial();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {...

you should set keys for each component to get information about it.

Set show tutorial in a button:

 FxButton(
                      text: AppLocalizations.of(context)!.start,
                      onTap: () {
                        Future.delayed(Duration.zero, _showTutorial);
                      },
                    ),

These are the resauls after pressing the button: