教程教练马克
一个指南，帮助您以精美、简洁且可自定义的方式展示您的应用及其功能。
教程教练标记
| 示例 1 | 示例 2 |
|---|---|
 |
 |
用法
要使用此插件，请将tutorial_coach_mark添加为pubspec.yaml文件中的依赖项。
示例
import 'package:flutter/material.dart';
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';
void showTutorial() {
TutorialCoachMark(
context,
targets: targets, // List<TargetFocus>
colorShadow: Colors.red, // DEFAULT Colors.black
// alignSkip: Alignment.bottomRight,
// textSkip: "SKIP",
// paddingFocus: 10,
finish: (){
print("finish");
},
clickTarget: (target){
print(target);
},
clickSkip: (){
print("skip");
}
)..show();
}
警告：在调用“show”之前，请确保您的视图已渲染，以便库可以找到小部件在屏幕上的位置。
创建目标（TargetFocus）
TargetFocus是表示将被聚焦的小部件并配置焦点后将显示的内容的类。
属性
| 属性 | 类型 | 描述 |
|---|---|---|
identify |
dynamic | 用于识别的免费 |
keyTarget |
GlobalKey | 想要聚焦的GlobalKey小部件 |
targetPosition |
TargetPosition | 如果您不想使用GlobalKey，则可以创建TargetPosition来确定焦点的位置。 |
contents |
ContentTarget[] | 要在聚焦小部件后显示的内容列表 |
创建内容（ContentTarget）
ContentTarget是负责确定在聚焦小部件后显示什么以及如何显示的内容的类。
属性
| 属性 | 类型 | 描述 |
|---|---|---|
align |
AlignContent | 使用此属性，您可以确定内容相对于聚焦的小部件（顶部、底部、左侧、右侧）显示在哪一区域。 |
child |
Widget | 要显示的内容 |
完整示例
import 'package:flutter/material.dart';
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';
List<TargetFocus> targets = List();
@override
void initState() {
targets.add(
TargetFocus(
identify: "Target 1",
keyTarget: keyButton,
contents: [
ContentTarget(
align: AlignContent.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
),),
)
],
),
)
)
]
)
);
targets.add(
TargetFocus(
identify: "Target 2",
keyTarget: keyButton4,
contents: [
ContentTarget(
align: AlignContent.left,
child: Container(
child: 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: 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
),),
)
],
),
)
),
ContentTarget(
align: AlignContent.top,
child: Container(
child: 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: 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
),),
)
],
),
)
)
]
)
);
targets.add(
TargetFocus(
identify: "Target 3",
keyTarget: keyButton5,
contents: [
ContentTarget(
align: AlignContent.right,
child: Container(
child: 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: 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
),),
)
],
),
)
)
]
)
);
}
void showTutorial() {
TutorialCoachMark(
context,
targets: targets, // List<TargetFocus>
colorShadow: Colors.red, // DEFAULT Colors.black
// alignSkip: Alignment.bottomRight,
// textSkip: "SKIP",
// paddingFocus: 10,
// opacityShadow: 0.8,
finish: (){
print("finish");
},
clickTarget: (target){
print(target);
},
clickSkip: (){
print("skip");
}
)..show();
}
