Tutorial Coach Mark In Flutter
A Mobile Developer is otherwise called a mobile application developer or an application developer — is somebody who plans, develops, and executes mobile applications. They are answerable for the advancement of these software applications following suitable mobile platforms.
In this article, we will explore the Tutorial Coach Mark In Flutter. We will also implement a demo program and create a beautiful and easy tutorial using the tutorial_coach_mark package in your flutter applications.
tutorial_coach_mark | Flutter Package
Create a beautiful and easy tutorial for your application. Example 1 Example 2 To use this plugin, add…pub.dev
Table Of Contents::
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:
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.
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.
In this target, we will add TargetFocus(). In this TargetFocus, we will add shape: ShapeLightFocus.RRect, radius, identify the tutorial target, keyTarget, color, and contents you want to be shown on your screen.
targets.add(
TargetFocus(
identify: "Target 1",
keyTarget: key,
color: Colors.red,
contents: [
TargetContent(
align: ContentAlign.bottom,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Titulo lorem ipsum",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, 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.white),
),
)
],
),
),
)
],
shape: ShapeLightFocus.RRect,
radius: 5,
),
);
When we run the application, we ought to get the screen’s output like the underneath screen capture.
In this target, we will add TargetFocus(). In this TargetFocus, we will add shape: ShapeLightFocus.Circle, identify the tutorial target, keyTarget, and add multiple contents you want to be shown on your screen.
targets.add(TargetFocus(
identify: "Target 2",
keyTarget: _key2,
contents: [
TargetContent(
align: ContentAlign.top,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Text(
"Multiples contents",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.",
style: TextStyle(color: Colors.white),
),
],
),
)),
TargetContent(
align: ContentAlign.bottom,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Text(
"Multiples contents",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
Container(
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.",
style: TextStyle(color: Colors.white),
),
),
],
))
],
shape: ShapeLightFocus.Circle,
));
When we run the application, we ought to get the screen’s output like the underneath screen capture.
In this target, we will add TargetFocus(). In this TargetFocus, we will add shape: ShapeLightFocus.Circle, identify the tutorial target, keyTarget, color, and add contents inside the network image you want to be shown on your screen.
targets.add(TargetFocus(
identify: "Target 3",
keyTarget: _key3,
color: Colors.red,
contents: [
TargetContent(
align: ContentAlign.top,
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Image.network(
"https://flutterdevs.com/wp-content/uploads/2020/10/logog.png",fit: BoxFit.contain,
height: 120,
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Text(
"Image Load network",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.",
style: TextStyle(color: Colors.white),
),
],
),
))
],
shape: ShapeLightFocus.Circle,
));
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, set a duration
void initState() {
initTargets();
WidgetsBinding.instance.addPostFrameCallback(_layout);
super.initState();
}
We we addPostFrameCallback(_layout). We will below define _layout() method:
void _layout(_){
Future.delayed(Duration(milliseconds: 100));
showTutorial();
}
This method will add Future dot delayed duration in 100 milliseconds and add a showTutorial() function.
Now, we will define showTutorial() function:
void showTutorial() {
tutorialCoachMark = TutorialCoachMark(
context,
targets: targets,
colorShadow: Colors.pink,
textSkip: "SKIP",
paddingFocus: 10,
opacityShadow: 0.8,
onFinish: () {
print("finish");
},
onClickTarget: (target) {
print('onClickTarget: $target');
},
onSkip: () {
print("skip");
},
onClickOverlay: (target) {
print('onClickOverlay: $target');
},
)..show();
}
In this function, we will use the variable TutorialCoachMark(). In this TutorialCoachMark(), we will add inside a context, targets, colorShadow, opacityShadow, paddingFocus, and the last you want to add ..show() method for showing the TutorialCoachMark.
Code File:
https://gist.github.com/ShaiqAhmedkhan/24e389b7b9fe797496eb3ac1f117d332#file-my_home_screen-dart
Conclusion:
In the article, I have explained the Tutorial Coach Mark basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Tutorial Coach Mark On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Tutorial Coach Mark in your flutter projects. We will show you what the Tutorial Coach Mark? and indicate when you tap the item. The layout and shape were changing, skip button for stop tutorial, etc., and make a demo program for working Tutorial Coach Mark in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Tutorial Coach Mark Demo:
flutter-devs/flutter_tutorial_coach_mark_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
