Flutter教程引导插件tutorial_plus的使用

本README描述了该包的功能。如果你将此包发布到pub.dev，此README的内容将会出现在你包的首页。

对于如何编写一个好的包README的更多信息，请参阅编写包页面指南。

对于开发包的一般信息，请参阅Dart关于创建库包的指南和Flutter关于开发包和插件的指南。

使用

示例代码

以下是一个完整的示例，展示了如何使用tutorial_plus插件来实现教程引导功能。

示例代码

import 'package:flutter/material.dart';
import 'package:tutorial_plus/tutorial.dart';
import 'package:tutorial_plus/tutorial_controller.dart';

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

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

  // 这个小部件是你的应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  late TutorialController controllers;

  void _incrementCounter() {
    controllers.show(); // 显示教程步骤
  }

  @override
  Widget build(BuildContext context) {
    return Tutorials.builder(
      onStatusEnd: (controller) {}, // 教程结束时的回调
      customWidgetMessage: (controller) {
        return Text(controller.message ?? ''); // 自定义消息显示
      },
      onStatusChanged: (controller) {
        controllers = controller; // 获取教程控制器
      },
      builder: (context, controller) {
        return Scaffold(
          body: Padding(
            padding: const EdgeInsets.only(top: 25.0),
            child: SingleChildScrollView(
              controller: controller.scrollController, // 滚动控制器
              child: Column(
                children: [
                  Container(
                    height: 30,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.black,
                  ),
                  TutorialStep(
                    controller: controller.apply( // 第三个教程步骤
                      message: 'ini tutorial ke 3', // 提示信息
                      id: '3', // 步骤ID
                      isActive: true, // 是否激活
                      order: 3, // 步骤顺序
                      messagePadding: 30, // 提示信息内边距
                      scrollPadding: 100, // 滚动区域填充
                      isFloatings: false, // 是否浮动
                    ),
                    child: Container(
                      height: 200,
                      width: MediaQuery.of(context).size.width,
                      color: Colors.pink,
                    ),
                  ),
                  Container(
                    height: 500,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.blue,
                  ),
                  TutorialStep(
                    controller: controller.apply( // 第一个教程步骤
                      message: 'ini tutorial ke 1',
                      id: '11',
                      isActive: true,
                      order: 1,
                      messagePadding: 30,
                      scrollPadding: 100,
                      isFloatings: false,
                    ),
                    child: Container(
                      height: 200,
                      width: MediaQuery.of(context).size.width,
                      color: Colors.green,
                    ),
                  ),
                ],
              ),
            ),
          ),
          floatingActionButton: TutorialStep(
            controller: controller.apply( // 第二个教程步骤
              message: 'ini tutorial ke 2',
              id: '1',
              isActive: true,
              order: 2,
              messagePadding: 30,
              scrollPadding: 100,
            ),
            child: FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: const Icon(Icons.add),
            ),
          ),
        );
      },
    );
  }
}

代码说明

1. 导入必要的包：

   import 'package:flutter/material.dart';
   import 'package:tutorial_plus/tutorial.dart';
   import 'package:tutorial_plus/tutorial_controller.dart';
   

2. 初始化教程控制器：

   late TutorialController controllers;
   

3. 定义教程步骤：

   TutorialStep(
     controller: controller.apply(
       message: 'ini tutorial ke 3',
       id: '3',
       isActive: true,
       order: 3,
       messagePadding: 30,
       scrollPadding: 100,
       isFloatings: false,
     ),
     child: Container(
       height: 200,
       width: MediaQuery.of(context).size.width,
       color: Colors.pink,
     ),
   )
   

4. 触发教程显示：

   void _incrementCounter() {
     controllers.show();
   }
   

5. 构建教程界面：

   return Tutorials.builder(
     onStatusEnd: (controller) {},
     customWidgetMessage: (controller) {
       return Text(controller.message ?? '');
     },
     onStatusChanged: (controller) {
       controllers = controller;
     },
     builder: (context, controller) {
       return Scaffold(
         body: Padding(
           padding: const EdgeInsets.only(top: 25.0),
           child: SingleChildScrollView(
             controller: controller.scrollController,
             child: Column(
               children: [
                 Container(
                   height: 30,
                   width: MediaQuery.of(context).size.width,
                   color: Colors.black,
                 ),
                 ...
               ],
             ),
           ),
         ),
         floatingActionButton: TutorialStep(
           controller: controller.apply(
             message: 'ini tutorial ke 2',
             id: '1',
             isActive: true,
             order: 2,
             messagePadding: 30,
             scrollPadding: 100,
           ),
           child: FloatingActionButton(
             onPressed: _incrementCounter,
             tooltip: 'Increment',
             child: const Icon(Icons.add),
           ),
         ),
       );
     },
   );