Flutter 酷炫的引導(dǎo)插件
在本文，我們將探討「Flutter」 的**Tutorial Coach Mark。**我們還將實(shí)現(xiàn)一個演示程序，并在您的flutter應(yīng)用程序中使用「tutorial_coach_mark」包創(chuàng)建漂亮而簡單的教程。
pub 地址：https://pub.dev/packages/tutorial_coach_mark
效果：
該演示視頻展示了如何在Flutter中使用教程指導(dǎo)標(biāo)記。它顯示了如何在flutter應(yīng)用程序中使用「tutorial_coach_mark」程序包來使用引導(dǎo)，并顯示了當(dāng)您單擊項(xiàng)目時，布局和形狀發(fā)生了變化，跳過了停止教程的按鈕等。它們將顯示在設(shè)備上。
使用
添加依賴
tutorial_coach_mark: ^0.6.0+1引入
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';運(yùn)行命令：「flutter packages get」
啟用「AndriodX」
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
在libs目錄下創(chuàng)建 「my_home_page.dart」 文件，
TutorialCoachMark tutorialCoachMark;
List<TargetFocus> targets = List();
GlobalKey key = GlobalKey();
GlobalKey _key1 = GlobalKey();
GlobalKey _key2 = GlobalKey();
GlobalKey _key3 = GlobalKey();
在正文部分，我們將在其中創(chuàng)建一個容器，添加一個圖像，然后使用Alignment.topCenter對其進(jìn)行包裝并添加一個key。我們還將創(chuàng)建兩個凸起的按鈕，并添加一個不同的鍵，并用「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: () {},
),
),
),
),
],
),
),
現(xiàn)在，我們將創(chuàng)建**initState（）「方法。在此方法中，我們將添加一個」initTargets（）**方法。
@override
void initState（）{
initTargets（）;
super.initState（）;
}
在**initTargets（）**方法中，我們將定位所有列表：
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),
),
)
],
),
))
],
),
);
在此目標(biāo)中，我們將添加「TargetFocus（）」。在此TargetFocus中，我們將添加「keyTarget，「并」標(biāo)識」要在屏幕上顯示的教程目標(biāo)和「內(nèi)容」。當(dāng)我們運(yùn)行應(yīng)用程序時，我們應(yīng)該獲得屏幕的輸出，如下面的屏幕截圖所示。
添加「TargetFocus（）」。在這個TargetFocus，我們將添加「形狀」：ShapeLightFocus.RRect，「半徑」，「識別」教程目標(biāo)，「keyTarget」，「顏色」和「內(nèi)容」，你希望你的屏幕上顯示。
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,
),
);
添加「TargetFocus（）」。在此TargetFocus中，我們將添加「shape」：ShapeLightFocus.Circle，「標(biāo)識」教程目標(biāo)「keyTarget」，并添加要顯示在屏幕上的「多個內(nèi)容」。
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,
));
添加「TargetFocus（）」。在此TargetFocus中，我們將添加「shape」：ShapeLightFocus.Circle，「標(biāo)識」教程目標(biāo)，「keyTarget」，「顏色，「并在要顯示在屏幕上的網(wǎng)絡(luò)圖像內(nèi)添加」內(nèi)容」。
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,
));
現(xiàn)在，設(shè)置一個持續(xù)時間
void initState() {
initTargets();
WidgetsBinding.instance.addPostFrameCallback(_layout);
super.initState();
}
添加PostFrameCallback（_layout）。我們將在下面定義layout（）方法：
void _layout(_){
Future.delayed(Duration(milliseconds: 100));
showTutorial();
}
此方法將添加Future點(diǎn)延遲持續(xù)時間（以100毫秒為單位），并添加**showTutorial（）**函數(shù)。
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();
}
完整代碼：
import 'package:flutter/material.dart';
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TutorialCoachMark tutorialCoachMark;
List<TargetFocus> targets = List();
GlobalKey key = GlobalKey();
GlobalKey _key1 = GlobalKey();
GlobalKey _key2 = GlobalKey();
GlobalKey _key3 = GlobalKey();
@override
void initState() {
initTargets();
WidgetsBinding.instance.addPostFrameCallback(_layout);
super.initState();
}
void _layout(_){
Future.delayed(Duration(milliseconds: 100));
showTutorial();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(
backgroundColor: Colors.black,
title: Text("Tutorial Coach Mark Demo"),
leading: Icon(Icons.menu),
key: _key1,
),
body: Container(
color: Colors.white,
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 170.0),
child: InkWell(
onTap: () {
showTutorial();
},
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: () {},
),
),
),
),
],
),
),
);
}
void initTargets() {
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),
),
)
],
),
))
],
),
);
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,
),
);
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,
));
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,
));
}
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();
}
}
Github 地址：https://github.com/flutter-devs/flutter_tutorial_coach_mark_demo
評論
圖片
表情