Tutorial Coach Mark In Flutter
By: Shaiq Khan
Tags: Flutter, Mobile App Development, Dart, Flutter App Development, Tutorialcoachmark

Tutorial Coach Mark:

Tutorial Coach Mark encourages you to introduce your application and its highlights in a beautiful, simple, and adaptable way.

Demo Module ::

This demo video shows how to use the tutorial coach mark in a flutter. It shows how tutorial coach mark will work using the tutorial_coach_mark package in your flutter applications and shows that when you tap the item, then the layout and shape were changing, skip button for stop tutorial, etc. They will be shown on your device.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

tutorial_coach_mark: ^0.6.0+1

Step 2: Add the assets

Add assets to pubspec — yaml file.

assets:

assets:

- assets/

Step 3: Import

import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';

Step 4: Run flutter packages get in the root directory of your app.

Step 5: Enable AndriodX

Add this to your gradle.properties file:

org.gradle.jvmargs=-Xmx1536M

android.enableR8=true

android.useAndroidX=true

android.enableJetifier=true

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called my_home_page.dart inside the lib folder.

First, we will create variables TutorialCoachMark and global keys.

TutorialCoachMark tutorialCoachMark;

List<TargetFocus> targets = List();



GlobalKey key = GlobalKey();

GlobalKey _key1 = GlobalKey();

GlobalKey _key2 = GlobalKey();

GlobalKey _key3 = GlobalKey();

In the body part, we will make one container inside, add an image, and wrap it with Alignment.topCenter and add a key. We will also create two raised buttons and add a different key and surround it with Align().

Container(

color: Colors.white,

child: Stack(

children: <Widget>[

Padding(

padding: const EdgeInsets.only(top: 170.0),

child: Align(

alignment: Alignment.topCenter,

child: Container(

key: key,

color: Colors.orange[100],

height: 100,

width: MediaQuery.of(context).size.width - 50,

child: Align(

alignment: Alignment.center,

child: Image.asset(

"assets/powered_by.png",

),

),

),

),

),

Align(

alignment: Alignment.center,

child: SizedBox(

width: 50,

height: 50,

child: RaisedButton(

key: _key2,

onPressed: () {},

),

),

),

Align(

alignment: Alignment.bottomCenter,

child: Padding(

padding: const EdgeInsets.all(50.0),

child: SizedBox(

width: 50,

height: 50,

child: RaisedButton(

key: _key3,

onPressed: () {},

),

),

),

),



],

),

),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Before Tutorial Coach Mark

Now, we will create the initState() method. In this method, we will add an initTargets() method.

@override

void initState() {

initTargets();

super.initState();

}

Now we will deeply define the initTargets() method.

In the initTargets() method, we will target all the list:

targets.add(

TargetFocus(

identify: "Target 0",

keyTarget: _key1,

contents: [

TargetContent(

align: ContentAlign.bottom,

child: Container(

child: Column(

mainAxisSize: MainAxisSize.min,

crossAxisAlignment: CrossAxisAlignment.center,

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text(

"Titulo lorem ipsum",

style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black, fontSize: 20.0),

),

Padding(

padding: const EdgeInsets.only(top: 10.0),

child: Text(

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.",

style: TextStyle(color: Colors.black),

),

)

],

),

))

],

),

);

In this target, we will add TargetFocus(). In this TargetFocus, we will add keyTarget, and identify the tutorial target and contents you want to show on your screen. When we run the application, we ought to get the screen’s output like the underneath screen capture.