Flutter教程学习插件flutter_tutorial的使用

Flutter教程学习插件flutter_tutorial的使用

flutter_tutorial 插件介绍

flutter_tutorial 提供了一个 API 来显示教程覆盖层，并突出显示某些项目。 该插件可以帮助开发者创建交互式教程，使用户更容易理解应用程序的功能。

示例代码

下面是一个完整的示例代码，展示了如何使用 flutter_tutorial 插件来创建一个简单的的教程应用。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final GlobalKey<_buttonKey> _buttonKey = GlobalKey<>();
  final GlobalKey<_textKey> _textKey = GlobalKey<>();

  List<ExampleTutorialEntry> tutorialEntries = [
    ExampleTutorialEntry(
      [RRect.fromRectAndRadius(getBasicRect(_buttonKey), const Radius.circular(28))],
      'Press the button to increase the counter',
      Alignment.center,
    ),
    ExampleTutorialEntry(
      [getBasicRRect(_textKey)],
      'Counter will be increased here',
      Alignment.bottomCenter,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            ListTile(
              title: const Text('Counter example'),
              onTap: () {
                Tutorial().show&lt;ExampleTutorialEntry&gt;(
                  context,
                  children: tutorialEntries,
                  onPressedBehavior: OnPressedBehavior.next,
                  dialogBuilder: (context, index, next, previous) {
                    final entry = tutorialEntries[index];
                    return TutorialEntryWidget(entry: entry);
                  },
                );
              },
            ),
            ListTile(
              title: const Text('Grid view example'),
              onTap: () {
                Navigator.push(context, CounterPage.route());
              },
            ),
            ListTile(
              title: const Text('Text edit example'),
              onTap: () {
                Navigator.push(context, GridViewPage.route());
              },
            ),
          ],
        ),
      ),
    );
  }
}

使用说明

1. 创建全局键并传递给需要突出显示的 widget

   static final _buttonKey = GlobalKey();
   static final _textKey = GlobalKey();
   

2. 创建教程条目

   final tutorialEntries = [
     ExampleTutorialEntry(
       RRect.fromRectAndRadius(getBasicRect(_buttonKey), const Radius.circular(28)),
       'Press the button to increase the counter',
       Alignment.center,
     ),
     ExampleTutorialEntry(
       getBasicRRect(_textKey),
       'Counter will be increased here',
       Alignment.bottomCenter,
     ),
   ];
   

3. 创建教程对话框

   class TutorialEntryWidget extends StatelessWidget {
     const TutorialEntryWidget({Key? key, required this.entry}) : super(key: key);
   
     final ExampleTutorialEntry entry;
   
     @override
     Widget build(BuildContext context) {
       return Align(
         alignment: entry.alignment,
         child: SafeArea(
           child: Material(
             color: Colors.transparent,
             child: Text(
               entry.text,
               style: const TextStyle(
                 fontSize: 20,
                 color: Colors.white,
               ),
             ),
           ),
         ),
       );
     }
   }
   

4. 启动教程

   Tutorial().show<ExampleTutorialEntry>(
     context,
     children: tutorialEntries,
     onPressedBehavior: OnPressedBehavior.next,
     dialogBuilder: (context, index, next, previous) {
       final entry = tutorialEntries[index];
       return TutorialEntryWidget(entry: entry);
     },
   );
   

其他信息

• 提供多个要突出显示的 widget 可以提供多个要突出显示的 widget，仍然可以正常动画处理。

• OnPressedBehavior OnPressedBehavior 指定在按下对话框外时应采取的动作：

  • close
  • next
  • none

• next 和 previous 方法在对话框构建器中 可以在对话框构建器中使用 next 和 previous 方法添加自定义按钮，以跳过向前或向后。

• 准备下一个 放置定义任何动画之前移动到下一张幻灯片的位置（当使用 OnPressedBehavior.next 时有用）。

• 创建比 widget 更大的高亮区域 可以膨胀 Rect 或 RRect 类以使高亮区域更大，或者减小它们以适应布局中的其他 widget。

• 更改覆盖层背景颜色和不透明度 背景颜色和其不透明度可以轻松调整以满足您的需求。

backgroundColor: Colors.blue,
backgroundMaxOpacity: 0.8,