Flutter导航教程插件navigable_tutorial的使用

Flutter导航教程插件navigable_tutorial的使用

教程

这是从 此插件 派生出来的。

使用 tutorial 插件非常简单。

首先创建全局键并添加到你想要展示的组件上：

final keyMenu = GlobalKey();
final keyContainer = GlobalKey();
final keyChat = GlobalKey();

然后创建一个 TutorialItens 列表：

List<TutorialItens> itens = [];

[@override](/user/override)
void initState() {
  itens.addAll([
    TutorialItens(
      globalKey: keyMenu,
      touchScreen: true,
      top: 200,
      left: 50,
      children: [
        Text(
          "这是我们的菜单，你可以看到很多东西。",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        SizedBox(
          height: 100,
        )
      ],
      widgetNext: Text(
        "点击继续",
        style: TextStyle(
          color: Colors.purple,
          fontWeight: FontWeight.bold,
        ),
      ),
      shapeFocus: ShapeFocus.oval),
    TutorialItens(
      globalKey: keyChat,
      touchScreen: true,
      top: 200,
      left: 50,
      children: [
        Text(
          "如果遇到任何问题，请进入聊天室，我们随时准备帮助你。",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        SizedBox(
          height: 100,
        )
      ],
      widgetNext: Text(
        "点击继续",
        style: TextStyle(
          color: Colors.purple,
          fontWeight: FontWeight.bold,
        ),
      ),
      shapeFocus: ShapeFocus.oval,
    ),
    TutorialItens(
      globalKey: keyContainer,
      touchScreen: true,
      bottom: 50,
      left: 50,
      children: [
        Text(
          "在这个部分，你可以访问所有的凉鞋。",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        SizedBox(
          height: 10,
        )
      ],
      widgetNext: Text(
        "退出",
        style: TextStyle(
          color: Colors.purple,
          fontWeight: FontWeight.bold,
        ),
      ),
      shapeFocus: ShapeFocus.square,
    ),
  ]);
  super.initState();
}

在其中我们有 TutorialItens，这是你的应用中整个教程部分所在的地方。

TutorialItens

  • globalKey - 你想要聚焦的组件的全局键。
  • touchScreen - 是否通过点击屏幕上的任意位置来移动到下一个教程项。
  • children - 用于组成屏幕的部件列表。
  • widgetNext - 一个部件用于移动到下一个项目，如果 touchScreen 等于 false，点击将仅在该部件上有效。
  • shapeFocus - 聚焦形状可以选择 ShapeFocus.oval 或 ShapeFocus.square。
  • 可以使用 (top, bottom, left, right) 对齐屏幕并定位。

Tutorial.show(context, itens)

show() 方法接收两个参数，上下文和你创建的 TutorialItens 列表。现在只需运行 Tutorial.show(context, itens) 即可。

Tutorial.showTutorial(context, itens);

示例代码

import 'package:flutter/material.dart';
import 'package:tutorial/navigable_tutorial.dart';

main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      iconTheme: IconThemeData(
        color: Colors.black,
      ),
    ),
    home: Home(),
  ));
}

class Home extends StatefulWidget {
  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List list = [
    {"url": "assets/images/sandalia.jpg", "x": 2, "y": 2},
    {"url": "assets/images/saltos.jpg", "x": 1, "y": 1},
    {"url": "assets/images/rasteirinha.jpg", "x": 1, "y": 1}
  ];

  // 创建全局键并添加到需要定位和展示的组件上。
  var keyMenu = GlobalKey();
  var keyContainer = GlobalKey();
  var keyChat = GlobalKey();

  List<TutorialItem> itens = [];

  // 初始化状态。
  [@override](/user/override)
  void initState() {
    itens.addAll([
      TutorialItem(
        globalKey: keyMenu,
        touchScreen: true,
        top: 200,
        left: 50,
        children: [
          Text(
            "这是我们的菜单，你可以看到很多东西。",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(
            height: 100,
          )
        ],
        widgetNext: Text(
          "点击继续",
          style: TextStyle(
            color: Colors.purple,
            fontWeight: FontWeight.bold,
          ),
        ),
        shapeFocus: ShapeFocus.oval),
      TutorialItem(
        globalKey: keyChat,
        touchScreen: true,
        top: 200,
        left: 50,
        children: [
          Text(
            "如果遇到任何问题，请进入聊天室，我们随时准备帮助你。",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(
            height: 100,
          )
        ],
        widgetNext: Text(
          "点击继续",
          style: TextStyle(
            color: Colors.purple,
            fontWeight: FontWeight.bold,
          ),
        ),
        shapeFocus: ShapeFocus.oval,
      ),
      TutorialItem(
        globalKey: keyContainer,
        touchScreen: true,
        bottom: 50,
        left: 50,
        children: [
          Text(
            "在这个部分，你可以访问所有的凉鞋。",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(
            height: 10,
          )
        ],
        widgetNext: Text(
          "退出",
          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](/user/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](/user/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导航教程插件navigable_tutorial的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter导航教程插件navigable_tutorial的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


navigable_tutorial 是一个 Flutter 插件，它允许你创建一个可导航的教程，用户可以在不同的步骤之间自由切换。这个插件非常适合用于应用引导、功能介绍或多步骤的教程场景。

安装 navigable_tutorial

首先，你需要在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  navigable_tutorial: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用 navigable_tutorial

1. 导入包

import 'package:navigable_tutorial/navigable_tutorial.dart';

2. 创建一个教程

你可以通过 NavigableTutorial 和 TutorialStep 来创建教程。每个 TutorialStep 代表一个步骤，你可以定义每个步骤的内容、标题、描述等。

NavigableTutorial(
  steps: [
    TutorialStep(
      title: 'Step 1',
      description: 'This is the first step of the tutorial.',
      content: Container(
        child: Text('Welcome to the first step!'),
      ),
    ),
    TutorialStep(
      title: 'Step 2',
      description: 'This is the second step of the tutorial.',
      content: Container(
        child: Text('Now you are in the second step!'),
      ),
    ),
    TutorialStep(
      title: 'Step 3',
      description: 'This is the third step of the tutorial.',
      content: Container(
        child: Text('Finally, the third step!'),
      ),
    ),
  ],
  onComplete: () {
    print('Tutorial completed!');
  },
  onSkip: () {
    print('Tutorial skipped!');
  },
);

3. 控制导航

NavigableTutorial 提供了内置的导航控件，用户可以通过按钮在步骤之间切换。你也可以在 onComplete 和 onSkip 回调中处理教程完成或跳过的逻辑。

4. 自定义样式

你可以通过 NavigableTutorial 的属性来自定义教程的外观，比如按钮颜色、字体大小等。

NavigableTutorial(
  steps: [...],
  nextButtonText: 'Next',
  previousButtonText: 'Previous',
  completeButtonText: 'Finish',
  skipButtonText: 'Skip',
  buttonColor: Colors.blue,
  textColor: Colors.white,
);

完整示例

import 'package:flutter/material.dart';
import 'package:navigable_tutorial/navigable_tutorial.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Navigable Tutorial Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => TutorialPage(),
                ),
              );
            },
            child: Text('Start Tutorial'),
          ),
        ),
      ),
    );
  }
}

class TutorialPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return NavigableTutorial(
      steps: [
        TutorialStep(
          title: 'Step 1',
          description: 'This is the first step of the tutorial.',
          content: Container(
            child: Text('Welcome to the first step!'),
          ),
        ),
        TutorialStep(
          title: 'Step 2',
          description: 'This is the second step of the tutorial.',
          content: Container(
            child: Text('Now you are in the second step!'),
          ),
        ),
        TutorialStep(
          title: 'Step 3',
          description: 'This is the third step of the tutorial.',
          content: Container(
            child: Text('Finally, the third step!'),
          ),
        ),
      ],
      onComplete: () {
        print('Tutorial completed!');
        Navigator.of(context).pop();
      },
      onSkip: () {
        print('Tutorial skipped!');
        Navigator.of(context).pop();
      },
    );
  }
}
回到顶部