Flutter tutorial_coach_mark package

This guide helps you to present your app and its features in a beautiful, simple, and customizable way.

Contents

• Installation
• Import
• Create Variables
• Init State
• Create Presentations
  1. Circle presentation
  2. Rectangle presentation
  3. Circle with right content presentation
  4. Multiple content presentation
• After Layout method
• Show Presentation
• Using Keys in Ui
• Full Code
• Plugin
• Similar plugins

Installation

tutorial_coach_mark | Flutter Package

dependencies:
  tutorial_coach_mark: ^0.5.1

Import

import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';

Create Variables

First, create TutorialCoachMark and global keys

TutorialCoachMark tutorialCoachMark;

List<TargetFocus> targets = List();

GlobalKey keyButton = GlobalKey();
GlobalKey keyButton1 = GlobalKey();
GlobalKey keyButton2 = GlobalKey();
GlobalKey keyButton3 = GlobalKey();
GlobalKey keyButton4 = GlobalKey();

Init State

Add this in instate to show presentation

WidgetsBinding.instance.addPostFrameCallback(_afterLayout);

Which executes a function only one time after the layout is completed.

@override
void initState() {
  WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
  super.initState();
}

Create Presentations

We can create different types of presentations.
Some of them are

• Circle presentation

TargetFocus(
  identify: "Target 1",
  keyTarget: keyButton,
  shape: ShapeLightFocus.Circle,
  contents: [
    ContentTarget(
      align: AlignContent.bottom,
      child: Column(
        children: <Widget>[
          "Services".text.size(20).white.make(),
          16.heightBox,
          "Select service type to filter saloon".text.white.make()
        ],
      )
    )
  ]
)

• Rectangle Presentation

TargetFocus(
  identify: "Target 2",
  keyTarget: keyButton1,
  shape: ShapeLightFocus.RRect,
  contents: [
    ContentTarget(
      align: AlignContent.bottom,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Icon(Icons.star, color: AppColors.ratingColor, size: 30),
          8.heightBox,
          "Rating".text.size(20).white.make(),
          16.heightBox,
          "Tap and drag to set rating filter".text.white.make()
        ],
      )
    )
  ]
)

• Circle with right content presentation

TargetFocus(
  identify: "Target 3",
  keyTarget: keyButton2,
  shape: ShapeLightFocus.Circle,
  contents: [
    ContentTarget(
      align: AlignContent.right,
      child: Column(
        children: <Widget>[
          Icon(LineIcons.user_alt_solid, color: AppColors.linkColor, size: 50),
          8.heightBox,
          "Gender".text.size(20).white.make(),
          16.heightBox,
          "Select gender to filter salon".text.white.make()
        ],
      )
    )
  ]
)

• Multiple Content Presentation

TargetFocus(
  identify: "Target 4",
  keyTarget: keyButton3,
  shape: ShapeLightFocus.RRect,
  contents: [
    ContentTarget(
      align: AlignContent.top,
      child: Column(
        children: <Widget>[
          Icon(LineIcons.map_marker_alt_solid, color: AppColors.linkColor, size: 30),
          8.heightBox,
          "Distance".text.size(20).white.make(),
          16.heightBox,
          "Set minimum distance to filter salon nearby".text.white.make()
        ],
      )
    ),
    ContentTarget(
      align: AlignContent.bottom,
      child: Column(
        children: <Widget>[
          "Set Maximum distance to filter salon nearby".text.white.make()
        ],
      )
    )
  ]
)

After Layout

This method will call once the UI rendered the last frame of the screen.

void _afterLayout(_) {
  Future.delayed(Duration(milliseconds: 100), () {
    showTutorial();
  });
}

Show Presentation

This will show your presentation

tutorialCoachMark = TutorialCoachMark(context,
  targets: targets,
  colorShadow: Colors.black,
  textSkip: "SKIP",
  paddingFocus: 10,
  opacityShadow: 0.8, onFinish: () {
    print("finish");
  }, onClickTarget: (target) {
    print(target);
  }, onClickSkip: () {
    print("skip");
  }
)..show();

Use Keys in Ui

Use created keys in the UI widgets the rest package will take care of.

Wrap(
  key: keyButton,
  .......
),

Full Code

You can check out the full example

bloggerraviteja/flutter_tutorial_coach_mark

Plugin

tutorial_coach_mark | Flutter Package

Similar plugins

highlighter_coachmark | Flutter Package

showcase view | Flutter Package

flutter_intro | Flutter Package

Let me know your feedback in response.
If you want other plugins tutorials let me know in the comments. I’ll try to make it.

Don’t forget to clap and follow me in the medium for more tutorials