Flutter插件tuto的介绍与使用

简介

这是一个非常酷的包，用于用户教程，包括以下功能：

• 教练标记（也称为气泡）
• 口头指导

此包是从 https://github.com/alex-melnyk/flutter_user_guidance 分支而来的。
原仓库似乎已被搁置，并且未发布到 pub.dev。因此，这里提供了分支版本。

私人提醒：flutter packages pub publish

使用示例

以下是一个完整的示例，展示如何在 Flutter 应用中使用该插件。

示例代码

main.dart

import 'package:flutter/material.dart';

import 'home.dart'; // 导入主页文件

void main() => runApp(const MyApp()); // 启动应用

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 移除调试标志
      title: 'Flutter 用户指南演示', // 应用标题
      theme: ThemeData(primarySwatch: Colors.blue), // 主题颜色
      home: const HomePageWithGuiding(), // 设置主页
    );
  }
}

home.dart

import 'package:flutter/material.dart';
import 'package:tuto/tuto.dart'; // 导入 tuto 插件

class HomePageWithGuiding extends StatefulWidget {
  const HomePageWithGuiding({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomePageWithGuidingState createState() => _HomePageWithGuidingState();
}

class _HomePageWithGuidingState extends State<HomePageWithGuiding> {
  // 定义一个列表来存储教练标记
  final List<TutorialOverlayItem> items = [
    TutorialOverlayItem(
      targetId: 'button1', // 目标元素的 ID
      builder: (context, controller) {
        return Align(
          alignment: Alignment.topCenter,
          child: Container(
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.9),
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Text(
              '点击按钮 1 开始！',
              style: TextStyle(color: Colors.white),
            ),
          ),
        );
      },
    ),
    TutorialOverlayItem(
      targetId: 'button2',
      builder: (context, controller) {
        return Align(
          alignment: Alignment.bottomRight,
          child: Container(
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.red.withOpacity(0.9),
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Text(
              '这是按钮 2 的提示！',
              style: TextStyle(color: Colors.white),
            ),
          ),
        );
      },
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('用户指南示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) => TutoPage(
                      items: items, // 将教练标记传递给 TutoPage
                    ),
                  ),
                );
              },
              child: Text('开始教程'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('按钮 1'),
              key: Key('button1'), // 为按钮设置唯一 ID
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('按钮 2'),
              key: Key('button2'), // 为按钮设置唯一 ID
            ),
          ],
        ),
      ),
    );
  }
}

tuto.dart

import 'package:flutter/material.dart';

class TutorialOverlayItem {
  final String targetId;
  final Widget Function(BuildContext context, VoidCallback closeCallback)
      builder;

  TutorialOverlayItem({
    required this.targetId,
    required this.builder,
  });
}

class TutoPage extends StatefulWidget {
  final List<TutorialOverlayItem> items;

  const TutoPage({required this.items});

  [@override](/user/override)
  _TutoPageState createState() => _TutoPageState();
}

class _TutoPageState extends State<TutoPage> {
  int currentIndex = 0;

  void nextStep() {
    setState(() {
      currentIndex++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    if (currentIndex >= widget.items.length) {
      return Scaffold(
        appBar: AppBar(
          title: Text('教程完成'),
        ),
        body: Center(
          child: Text('所有步骤已完成！'),
        ),
      );
    }

    return Stack(
      children: [
        Scaffold(
          appBar: AppBar(
            title: Text('用户教程'),
          ),
          body: Center(
            child: Text('当前步骤：${currentIndex + 1}/${widget.items.length}'),
          ),
        ),
        Positioned.fill(
          child: IgnorePointer(
            ignoring: true,
            child: widget.items[currentIndex].builder(
              context,
              nextStep,
            ),
          ),
        ),
      ],
    );
  }
}