Flutter引导功能插件feature_guider的使用

Flutter引导功能插件feature_guider的使用

预览效果

Sample

功能介绍

  • 支持自定义描述小部件以用于指导区域。
  • 支持使用 Widget#key 或 Rect 锁定提示位置。
  • 支持设置背景蒙版的不透明度。
  • 支持设置动画过渡的持续时间。
  • 支持预设描述小部件的位置选项。
  • 支持设置指导区域的内边距。
  • 支持设置指导区域的圆角半径。
  • 支持设置描述与指导区域之间的间隔。

使用方法

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
  guideManager ??= GuideManager(context, opacity: 0.7);
  guideManager!.prepare([
    GuideItem(
      description: "点击此处返回",
      toGuideKey: keyAppBarBack,
      padding: EdgeInsets.zero,
    ),
  ]);
  guideManager!.show();
});

GuideManager 参数说明

参数 描述
context BuildContext
opacity 蒙版不透明度，默认值为0.4
duration 提示块动画过渡时间，默认值为200ms，如果设置为零则无动画

GuideItem 参数说明

参数 描述
descriptionWidget 自定义描述小部件
toGuideKey 传递一个 GlobalKey 以定位指导区域
toGuideRect 传递一个 Rect 以定位指导区域
position 描述在指导区域内的显示位置枚举
padding 指导区域内部填充
borderRadius 指导区域圆角半径
textInterval 描述与指导区域之间的间隔

DescriptionPosition 枚举值

  • screenCenter - 屏幕中心
  • alignTopLeft - 内容位于目标区域上方，左对齐
  • alignTopRight - 内容位于目标区域上方，右对齐
  • alignBottomLeft - 内容位于目标区域下方，左对齐
  • alignBottomRight - 内容位于目标区域下方，右对齐
  • auto - 基于组件位置和文本尺寸自动确定

完整示例代码

import 'package:flutter/material.dart';
import 'package:feature_guider/guide_manager.dart';
import 'package:feature_guider/guide_item.dart';

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

  [@override](/user/override)
  State<SampleDetailPage> createState() => _SampleDetailPageState();
}

class _SampleDetailPageState extends State<SampleDetailPage> {
  GlobalKey keyAppBarBack = GlobalKey();
  GlobalKey keyAppBarTitle = GlobalKey();
  GlobalKey keyCountDisplay = GlobalKey();
  GlobalKey keyCountIncrease = GlobalKey();

  GuideManager? guideManager;

  int count = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      guideManager ??= GuideManager(context, opacity: 0.7);
      guideManager!.prepare([
        GuideItem(
          description: "点击此处返回",
          toGuideKey: keyAppBarBack,
          padding: EdgeInsets.zero,
        ),
        GuideItem(
          description: "这是此页的标题",
          toGuideKey: keyAppBarTitle,
          padding: EdgeInsets.zero,
        ),
        GuideItem(
          description: "计数显示区域",
          toGuideKey: keyCountDisplay,
          padding: EdgeInsets.zero,
        ),
        GuideItem(
          description: "点击此处增加计数",
          toGuideKey: keyCountIncrease,
          padding: const EdgeInsets.all(5),
          borderRadius: const BorderRadius.all(Radius.circular(50)),
        ),
      ]);
      guideManager!.show();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "GuideSamplePage",
          key: keyAppBarTitle,
          style: const TextStyle(
            fontSize: 16,
          ),
        ),
        leading: Icon(
          Icons.arrow_back,
          key: keyAppBarBack,
        ),
      ),
      body: Center(
        child: Text(
          "count=$count",
          key: keyCountDisplay,
          style: const TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        key: keyCountIncrease,
        onPressed: () {
          setState(() {
            count++;
          });
        },
        child: Container(
          padding: const EdgeInsets.all(8),
          decoration: const BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.all(Radius.circular(50))),
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用feature_guider插件来实现引导功能的代码案例。feature_guider是一个流行的Flutter插件，用于在应用中显示引导提示。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  feature_guider: ^latest_version  # 请替换为最新的版本号

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

2. 导入包

在你的Dart文件中导入feature_guider包：

import 'package:feature_guider/feature_guider.dart';

3. 初始化FeatureGuider

在应用的入口文件（通常是main.dart）中初始化FeatureGuider：

void main() {
  runApp(MyApp());
  FeatureGuider.initialize(context: MyApp.context); // 假设MyApp有一个静态context属性
}

class MyApp extends StatelessWidget {
  static BuildContext? context;

  @override
  Widget build(BuildContext context) {
    MyApp.context = context; // 保存全局上下文
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

注意：在Flutter 2.x及以后的版本中，直接在main函数中获取全局BuildContext是不可行的。这里假设你有一个方法来安全地传递和保存全局上下文。

4. 创建引导步骤

在你的主页或其他屏幕上定义引导步骤。例如，在HomeScreen中：

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Builder(
        builder: (context) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Welcome to the Home Screen!',
                key: ValueKey('welcome_text'), // 使用唯一的Key来定位元素
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('Show Feature'),
                key: ValueKey('feature_button'), // 使用唯一的Key来定位元素
              ),
            ],
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 显示引导提示
          showFeatureGuider(context);
        },
        tooltip: 'Show Guide',
        child: Icon(Icons.info),
      ),
    );
  }

  void showFeatureGuider(BuildContext context) {
    List<GuiderStep> steps = [
      GuiderStep(
        context: context,
        targetKey: ValueKey('welcome_text'),
        title: 'Welcome Message',
        description: 'This is the welcome message on the Home Screen.',
        position: GuiderPosition.top,
      ),
      GuiderStep(
        context: context,
        targetKey: ValueKey('feature_button'),
        title: 'Feature Button',
        description: 'Tap this button to show a feature.',
        position: GuiderPosition.bottom,
      ),
    ];

    FeatureGuider.show(
      context: context,
      steps: steps,
      onFinish: () {
        print('Guide finished!');
      },
    );
  }
}

5. 运行应用

现在你可以运行你的应用，点击浮动操作按钮（FAB）来显示引导提示。

总结

以上代码展示了如何在Flutter项目中使用feature_guider插件来创建和显示引导提示。你可以根据需要调整引导步骤的标题、描述、位置以及目标元素的Key。确保每个目标元素都有一个唯一的ValueKey，这样feature_guider才能正确地找到并高亮显示它们。

回到顶部