tutorial_coach_mark 1.2.11 
tutorial_coach_mark: ^1.2.11 copied to clipboard
rafaelbarbosatec.comGuide that helps you to present your app and its features in a beautiful, simple and customizable way. Tutorial | Guide | Coach.
// ignore_for_file: avoid_print
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TutorialCoachMark Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
late TutorialCoachMark tutorialCoachMark;
GlobalKey keyButton = GlobalKey();
GlobalKey keyButton1 = GlobalKey();
GlobalKey keyButton2 = GlobalKey();
GlobalKey keyButton3 = GlobalKey();
GlobalKey keyButton4 = GlobalKey();
GlobalKey keyButton5 = GlobalKey();
GlobalKey keyBottomNavigation1 = GlobalKey();
GlobalKey keyBottomNavigation2 = GlobalKey();
GlobalKey keyBottomNavigation3 = GlobalKey();
@override
void initState() {
createTutorial();
Future.delayed(Duration.zero, showTutorial);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
// key: keyButton1,
icon: const Icon(Icons.add),
onPressed: () {},
),
PopupMenuButton(
key: keyButton1,
icon: const Icon(Icons.view_list, color: Colors.white),
itemBuilder: (context) => [
const PopupMenuItem(
child: Text("Is this"),
),
const PopupMenuItem(
child: Text("What"),
),
const PopupMenuItem(
child: Text("You Want?"),
),
],
)
],
),
body: Container(
color: Colors.white,
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 100.0),
child: Align(
alignment: Alignment.topCenter,
child: Container(
key: keyButton,
color: Colors.blue,
height: 100,
width: MediaQuery.of(context).size.width - 50,
child: Align(
alignment: Alignment.center,
child: ElevatedButton(
child: const Icon(Icons.remove_red_eye),
onPressed: () {
showTutorial();
},
),
),
),
),
),
Align(
alignment: Alignment.center,
child: SizedBox(
width: 50,
height: 50,
child: ElevatedButton(
key: keyButton2,
onPressed: () {},
child: Container(),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(50.0),
child: SizedBox(
width: 50,
height: 50,
child: ElevatedButton(
key: keyButton3,
onPressed: () {},
child: Container(),
),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.all(50.0),
child: SizedBox(
width: 50,
height: 50,
child: ElevatedButton(
key: keyButton4,
onPressed: () {},
child: Container(),
),
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.all(50.0),
child: SizedBox(
width: 50,
height: 50,
child: ElevatedButton(
key: keyButton5,
onPressed: () {},
child: Container(),
),
),
),
)
],
),
),
bottomNavigationBar: Stack(
children: [
SizedBox(
height: 50,
child: Row(
children: [
Expanded(
child: Center(
child: SizedBox(
key: keyBottomNavigation1,
height: 40,
width: 40,
),
)),
Expanded(
child: Center(
child: SizedBox(
key: keyBottomNavigation2,
height: 40,
width: 40,
),
)),
Expanded(
child: Center(
child: SizedBox(
key: keyBottomNavigation3,
height: 40,
width: 40,
),
),
),
],
),
),
BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
// currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: (index) {},
),
],
),
);
}
void showTutorial() {
tutorialCoachMark.show(context: context);
}
void createTutorial() {
tutorialCoachMark = TutorialCoachMark(
targets: _createTargets(),
colorShadow: Colors.red,
textSkip: "SKIP",
paddingFocus: 10,
opacityShadow: 0.5,
imageFilter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
onFinish: () {
print("finish");
},
onClickTarget: (target) {
print('onClickTarget: $target');
},
onClickTargetWithTapPosition: (target, tapDetails) {
print("target: $target");
print(
"clicked at position local: ${tapDetails.localPosition} - global: ${tapDetails.globalPosition}");
},
onClickOverlay: (target) {
print('onClickOverlay: $target');
},
onSkip: () {
print("skip");
return true;
},
);
}
List<TargetFocus> _createTargets() {
List<TargetFocus> targets = [];
targets.add(
TargetFocus(
identify: "keyBottomNavigation1",
keyTarget: keyBottomNavigation1,
alignSkip: Alignment.topRight,
enableOverlayTab: true,
contents: [
TargetContent(
align: ContentAlign.top,
builder: (context, controller) {
return const Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Titulo lorem ipsum",
style: TextStyle(
color: Colors.white,
),
),
],
);
},
),
],
),
);
targets.add(
TargetFocus(
identify: "keyBottomNavigation2",
keyTarget: keyBottomNavigation2,
alignSkip: Alignment.topRight,
contents: [
TargetContent(
align: ContentAlign.top,
builder: (context, controller) {
return const Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Titulo lorem ipsum",
style: TextStyle(
color: Colors.white,
),
),
],
);
},
),
],
),
);
targets.add(
TargetFocus(
identify: "keyBottomNavigation3",
keyTarget: keyBottomNavigation3,
alignSkip: Alignment.topRight,
contents: [
TargetContent(
align: ContentAlign.top,
builder: (context, controller) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
"Titulo lorem ipsum",
style: TextStyle(
color: Colors.white,
),
),
const SizedBox(
height: 10,
),
ElevatedButton(
onPressed: () {
tutorialCoachMark.goTo(0);
},
child: const Text('Go to index 0'),
),
],
);
},
),
],
),
);
targets.add(
TargetFocus(
identify: "Target 0",
keyTarget: keyButton1,
contents: [
TargetContent(
align: ContentAlign.bottom,
builder: (context, controller) {
return const 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: 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),
),
),
],
);
},
),
],
),
);
targets.add(
TargetFocus(
identify: "Target 1",
keyTarget: keyButton,
color: Colors.purple,
contents: [
TargetContent(
align: ContentAlign.bottom,
builder: (context, controller) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
"Titulo lorem ipsum",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20.0,
),
),
const Padding(
padding: 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),
),
),
ElevatedButton(
onPressed: () {
controller.previous();
},
child: const Icon(Icons.chevron_left),
),
],
);
},
)
],
shape: ShapeLightFocus.RRect,
radius: 5,
),
);
targets.add(
TargetFocus(
identify: "Target 2",
keyTarget: keyButton4,
contents: [
TargetContent(
align: ContentAlign.left,
child: const Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Multiples content",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20.0),
),
Padding(
padding: 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),
),
)
],
),
),
TargetContent(
align: ContentAlign.top,
child: const Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Multiples content",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20.0),
),
Padding(
padding: 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,
),
);
targets.add(TargetFocus(
identify: "Target 3",
keyTarget: keyButton5,
contents: [
TargetContent(
align: ContentAlign.right,
child: const Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Title lorem ipsum",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20.0),
),
Padding(
padding: 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,
));
targets.add(TargetFocus(
identify: "Target 4",
keyTarget: keyButton3,
contents: [
TargetContent(
align: ContentAlign.top,
child: Column(
children: <Widget>[
InkWell(
onTap: () {
tutorialCoachMark.previous();
},
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Image.network(
"https://juststickers.in/wp-content/uploads/2019/01/flutter.png",
height: 200,
),
),
),
const Padding(
padding: EdgeInsets.only(bottom: 20.0),
child: Text(
"Image Load network",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0),
),
),
const Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.",
style: TextStyle(color: Colors.white),
),
],
),
),
],
shape: ShapeLightFocus.Circle,
));
targets.add(
TargetFocus(
identify: "Target 5",
keyTarget: keyButton2,
shape: ShapeLightFocus.Circle,
contents: [
TargetContent(
align: ContentAlign.top,
child: const Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: 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: const Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: 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),
),
],
))
],
),
);
return targets;
}
}Metadata
1173
likes
130
pub points
98%
popularity
Publisher
Metadata
Guide that helps you to present your app and its features in a beautiful, simple and customizable way. Tutorial | Guide | Coach.
Repository (GitHub)
View/report issues
Documentation
License
MIT (LICENSE)
