Flutter教程引导插件tutorial的使用
Flutter教程引导插件tutorial的使用
使用 tutorial 插件非常简单。下面是一个完整的示例代码，展示如何在Flutter应用中实现一个引导教程。
步骤一：创建全局键
首先，为需要显示的组件创建全局键：
final keyMenu = GlobalKey();
final keyContainer = GlobalKey();
final keyChat = GlobalKey();
步骤二：创建 TutorialItens 列表
然后创建一个 TutorialItens 的列表，并在 initState 方法中初始化：
List<TutorialItem> itens = [];
@override
void initState() {
itens.addAll([
TutorialItem(
globalKey: keyMenu,
touchScreen: true,
top: 200,
left: 50,
children: [
Text(
"Ali é nosso menu , você consegue ver varias coisas nele",
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(height: 100),
],
widgetNext: Text(
"Toque para continuar",
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
),
),
shapeFocus: ShapeFocus.oval,
),
TutorialItem(
globalKey: keyChat,
touchScreen: true,
top: 200,
left: 50,
children: [
Text(
"Qualquer duvida que aparecer , entre no nosso chat , estamos prontos para ajudar",
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(height: 100),
],
widgetNext: Text(
"Toque para continuar",
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
),
),
shapeFocus: ShapeFocus.oval,
),
TutorialItem(
globalKey: keyContainer,
touchScreen: true,
bottom: 50,
left: 50,
children: [
Text(
"Nessa sessão você vai ter acesso a todas as Rasteirinhas",
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(height: 10),
],
widgetNext: Text(
"Sair",
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
),
),
shapeFocus: ShapeFocus.square,
),
]);
super.initState();
// 延迟启动引导教程
Future.delayed(Duration(microseconds: 200)).then((value) {
Tutorial.showTutorial(context, itens);
});
}
TutorialItem 参数说明
globalKey: 组件的全局键，用于指定要聚焦的组件。touchScreen: 是否通过点击屏幕任何位置来移动到下一个教程项。children: 用于组成屏幕的部件列表。widgetNext: 用于移动到下一个项的部件，如果touchScreen为false，则点击仅限于该部件。shapeFocus: 聚焦形状可以选择ShapeFocus.oval或ShapeFocus.square。- 可以通过
(top, bottom, left, right)来对齐和定位。
步骤三：显示教程
使用 showTutorial 方法来显示教程：
Tutorial.showTutorial(context, itens);
完整示例代码
以下是一个完整的示例应用程序：
import 'package:flutter/material.dart';
import 'package:tutorial/tutorial.dart';
main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
iconTheme: IconThemeData(
color: Colors.black,
),
),
home: Home(),
));
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
var keyMenu = GlobalKey();
var keyContainer = GlobalKey();
var keyChat = GlobalKey();
List<TutorialItem> itens = [];
@override
void initState() {
itens.addAll([
TutorialItem(
globalKey: keyMenu,
touchScreen: true,
top: 200,
left: 50,
children: [
Text(
"Ali é nosso menu , você consegue ver varias coisas nele",
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(height: 100),
],
widgetNext: Text(
"Toque para continuar",
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
),
),
shapeFocus: ShapeFocus.oval,
),
TutorialItem(
globalKey: keyChat,
touchScreen: true,
top: 200,
left: 50,
children: [
Text(
"Qualquer duvida que aparecer , entre no nosso chat , estamos prontos para ajudar",
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(height: 100),
],
widgetNext: Text(
"Toque para continuar",
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
),
),
shapeFocus: ShapeFocus.oval,
),
TutorialItem(
globalKey: keyContainer,
touchScreen: true,
bottom: 50,
left: 50,
children: [
Text(
"Nessa sessão você vai ter acesso a todas as Rasteirinhas",
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(height: 10),
],
widgetNext: Text(
"Sair",
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
),
),
shapeFocus: ShapeFocus.square,
),
]);
Future.delayed(Duration(microseconds: 200)).then((value) {
Tutorial.showTutorial(context, itens);
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Icon(Icons.menu, key: keyMenu),
elevation: 0,
iconTheme: IconTheme.of(context),
centerTitle: true,
title: Text("DAKITA", style: TextStyle(color: Colors.black)),
backgroundColor: Colors.white,
actions: [
Container(
key: keyChat,
margin: EdgeInsets.symmetric(horizontal: 5),
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.circle,
),
child: Center(
child: Icon(Icons.chat_rounded, color: Colors.white),
),
)
],
),
body: Container(),
drawer: Drawer(),
);
}
}
class Background extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromRGBO(44, 191, 224, 1),
Color.fromRGBO(129, 71, 243, 1),
],
),
),
);
}
}
这个示例展示了如何在Flutter应用中使用 tutorial 插件来创建一个简单的引导教程。希望这对你有所帮助！
更多关于Flutter教程引导插件tutorial的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter教程引导插件tutorial的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter应用中使用tutorial_coach_mark插件来创建教程引导的示例代码。这个插件允许你在应用中添加高亮区域和提示信息，以引导用户了解应用的功能。
首先，你需要在你的pubspec.yaml文件中添加依赖项：
dependencies:
flutter:
sdk: flutter
tutorial_coach_mark: ^2.0.0 # 请检查最新版本号
然后运行flutter pub get来安装依赖。
接下来，在你的Flutter项目中创建一个新的Dart文件，例如coach_marks.dart，来定义你的教程引导：
import 'package:flutter/material.dart';
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';
class CoachMarksProvider with ChangeNotifier {
List<CoachMark> coachMarks = [
CoachMark(
identifier: "first",
child: Container(
color: Colors.white,
alignment: Alignment.center,
child: Text(
"这是第一个引导",
style: TextStyle(fontSize: 20),
),
),
anchor: Align(alignment: Alignment.topLeft, child: FlutterLogo(size: 100)),
description: "这是Flutter的Logo",
skipButton: TextButton(
onPressed: () => TutorialCoachMarkController().remove(identifier: "first"),
child: Text("跳过"),
),
nextButton: TextButton(
onPressed: () => TutorialCoachMarkController().next(),
child: Text("下一步"),
),
),
CoachMark(
identifier: "second",
child: Container(
color: Colors.white,
alignment: Alignment.center,
child: Text(
"这是第二个引导",
style: TextStyle(fontSize: 20),
),
),
anchor: Align(alignment: Alignment.topRight, child: Icon(Icons.star, size: 50)),
description: "这是一个星星图标",
skipButton: TextButton(
onPressed: () => TutorialCoachMarkController().remove(identifier: "second"),
child: Text("跳过"),
),
nextButton: TextButton(
onPressed: () => TutorialCoachMarkController().next(),
child: Text("下一步"),
),
),
// 你可以继续添加更多的引导
];
void showCoachMarks() {
final controller = TutorialCoachMarkController();
controller.show(coachMarks[0].identifier);
}
}
然后，在你的主页面（例如main.dart）中使用这个CoachMarksProvider来显示引导：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'coach_marks.dart';
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => CoachMarksProvider()),
],
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
final coachMarksProvider = Provider.of<CoachMarksProvider>(context);
return Scaffold(
appBar: AppBar(
title: Text("Flutter教程引导"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlutterLogo(size: 100),
SizedBox(height: 20),
Icon(Icons.star, size: 50),
// 你可以添加更多的UI元素
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
coachMarksProvider.showCoachMarks();
},
tooltip: '显示教程引导',
child: Icon(Icons.help),
),
);
}
}
在这个示例中，我们创建了一个CoachMarksProvider类来管理我们的教程引导。每个CoachMark都有一个标识符、一个子元素（通常是你希望用户注意到的UI元素）、一个锚点（用于定位引导的高亮区域）、描述文本以及跳过和下一步按钮。
通过点击浮动操作按钮（FAB），我们可以显示第一个教程引导。用户可以通过点击“下一步”按钮来查看下一个引导，或者点击“跳过”按钮来跳过当前引导。
你可以根据需要自定义这些引导的内容和样式。希望这个示例能帮助你在Flutter应用中实现教程引导功能！
