Flutter用户引导插件flutter_user_guildance的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter用户引导插件 flutter_user_guildance 的使用

简介

flutter_user_guildance 是一个用于在 Flutter 应用中为新用户提供引导提示的插件。它允许开发者轻松地创建用户引导步骤，帮助用户了解应用的功能。

屏幕截图

以下是插件的一些示例截图：

Sample 1 Sample 2

核心组件

UserGuildanceAnchor

UserGuildanceAnchor 用于标记需要高亮显示的部件。通过这个部件包裹你想要高亮的部件。

属性说明

属性 用途
group 指定要显示的引导组别
step 显示的步骤编号
subStep 如果步骤相同，subStep 决定显示顺序
tag 传递给 tipBuilder 和 slotBuilder 的标签，如果没有提供 tipBuilder，则该标签会作为提示文本
reportType 确定是否只高亮自身或点击后高亮父级节点
adjustRect 调整高亮区域的位置和大小
needMonitorScroll 如果部件位于列表视图或滚动视图中，需设置为 true 来报告位置变化
module 在嵌套引导时使用，防止位置信息传递到相邻的 UserGuildance

UserGuildance

UserGuildance 用于展示高亮项目，并确保其全屏显示。

属性说明

属性 用途
controller 控制器，用于显示、隐藏和移动下一步
tipBuilder 提供自定义提示部件
slotBuilder 提供自定义遮罩效果
opacity 遮罩层的透明度
duration 动画时间
customAnchors 添加未包裹部件的自定义锚点
moveNextOnTap 是否点击引导区域自动进入下一步
anchorAppearConditions 所有锚点必须出现在 UI 中
showMaskWhenMissCondition 如果条件不满足时是否显示进度

示例代码

简单示例

class _SimplePageState extends State<SimplePage> {
  UserGuidanceController userGuidanceController = UserGuidanceController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return UserGuidance(
      controller: userGuidanceController,
      opacity: 0.5,
      child: Scaffold(
        floatingActionButton: UserGuildanceAnchor(
            step: 1,
            tag: "This is tab Floating button.",
            child: FloatingActionButton(
              onPressed: () {
                userGuidanceController.show();
              },
            )),
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(40.0),
            child: UserGuildanceAnchor(
              step: 2,
              tag: "Start press the button",
              child:
                  ElevatedButton(onPressed: () {}, child: const Text("Button")),
            ),
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    userGuidanceController.dispose();
    super.dispose();
  }
}

复杂示例

class _HomePageState extends State<HomePage> {
  UserGuidanceController userGuidanceController = UserGuidanceController();
  var tabs = ["Tab1", "Tab2", "Tab3"];
  var buttonWidth = 100.0;

  Widget renderBubble(String text) {
    return BubbleWidget(
      decoration: null,
      arrowPosition: 156,
      ignoreArrowHeight: false,
      direction: BubbleDirection.bottom,
      topLeftRadius: const Radius.circular(15.0),
      topRightRadius: const Radius.circular(15.0),
      bottomLeftRadius: const Radius.circular(15.0),
      bottomRightRadius: const Radius.circular(15.0),
      arrowHeight: 15,
      arrowWidth: 15,
      childBuilder: (context, direction) {
        return SizedBox(
          width: 200,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              GestureDetector(
                behavior: HitTestBehavior.translucent,
                onTap: (() {}),
                child: const Padding(
                  padding: EdgeInsets.only(bottom: 10.0),
                  child: Center(
                    child: Icon(Icons.cancel_outlined),
                  ),
                ),
              ),
              Container(
                  height: 80,
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(15),
                          topRight: Radius.circular(15)),
                      gradient: LinearGradient(
                        colors: [Colors.red, Colors.blue],
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                      )),
                  child: Center(child: Text(text))),
            ],
          ),
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return UserGuidance(
      controller: userGuidanceController,
      opacity: 0.5,
      slotBuilder: (context, data) {
        if (data?.step == 1) {
          return BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(data!.position.height / 2.0),
          );
        }
        return null;
      },
      tipBuilder: (context, data) {
        if (data != null) {
          return TipWidget(
            child: ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 250.0),
                child: Text("${data.tag}")),
            data: data,
          );
        }

        return null;
      },
      child: DefaultTabController(
          length: tabs.length,
          child: Scaffold(
            floatingActionButton: UserGuildanceAnchor(
                group: 1,
                step: 1,
                tag:
                    "This is tab Floating button. Click it to open new page. It should be friendly to the end user",
                child: FloatingActionButton(
                  onPressed: () {
                    userGuidanceController.show();
                  },
                )),
            body: SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(children: [
                  TabBar(
                      tabs: tabs.map<Widget>((txt) {
                    var subStep = tabs.indexOf(txt);
                    return Tab(
                        child: UserGuildanceAnchor(
                            step: 0,
                            subStep: subStep,
                            reportType: AnchorReportParentType.tab,
                            tag: "This is tab $txt",
                            child: Text(
                              txt,
                              style: const TextStyle(color: Colors.black),
                            )));
                  }).toList()),
                  Padding(
                    padding: EdgeInsets.only(top: buttonWidth),
                    child: UserGuildanceAnchor(
                      group: 1,
                      step: 2,
                      tag: "Start press the button",
                      adjustRect: (rect) {
                        return Rect.fromLTWH(rect.left, rect.top + 5.0,
                            rect.width, rect.height - 10.0);
                      },
                      child: ElevatedButton(
                          onPressed: () async {
                            userGuidanceController.show(group: 1);
                            await Future.delayed(const Duration(seconds: 5));
                            buttonWidth = 200;
                            setState(() {});
                            await Future.delayed(const Duration(seconds: 5));
                            buttonWidth = 100;
                            setState(() {});
                          },
                          child: SizedBox(
                              width: buttonWidth, child: const Text("Button"))),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 100.0),
                    child: renderBubble("Hello, It test"),
                  ),
                  Expanded(
                      child: TabBarView(
                    children: tabs.map<Widget>((txt) => Container()).toList(),
                  ))
                ]),
              ),
            ),
          )),
    );
  }

  [@override](/user/override)
  void dispose() {
    userGuidanceController.dispose();
    super.dispose();
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_user_guidance插件的一个简单示例。请注意，由于flutter_user_guidance插件的具体实现和API可能会随时间变化，因此以下代码是基于假设的API设计编写的。在实际使用中，请参考该插件的最新文档和源代码。

首先，确保你已经在pubspec.yaml文件中添加了flutter_user_guidance依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_user_guidance: ^latest_version  # 替换为最新版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤使用flutter_user_guidance插件来创建用户引导。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_user_guidance/flutter_user_guidance.dart'; // 假设的包导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter User Guidance Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FlutterUserGuidance _guidance;

  @override
  void initState() {
    super.initState();
    // 初始化FlutterUserGuidance
    _guidance = FlutterUserGuidance(context);

    // 设置一个用户引导示例
    _setupUserGuidance();
  }

  void _setupUserGuidance() {
    // 假设FlutterUserGuidance有一个show方法用于显示引导
    _guidance.show(
      target: findByName('targetWidgetKey'), // 假设findByName是一个根据key查找widget的方法
      title: '欢迎使用我们的应用',
      description: '这是应用中的一个重要功能。',
      position: GuidancePosition.top, // 假设有一个枚举表示引导的位置
      onComplete: () {
        // 用户完成引导后的回调
        print('用户已完成引导');
      },
    );
  }

  // 这是一个假设的方法，用于根据key查找Widget
  Widget? findByName(String key) {
    // 在实际使用中，你可能需要使用GlobalKey或其他方法来定位widget
    // 这里仅作为示例，返回null
    return null; // 应该返回一个实际的Widget
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter User Guidance Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '这是一个示例应用',
            ),
            SizedBox(height: 20),
            Container(
              key: ValueKey('targetWidgetKey'), // 为目标widget设置一个key
              width: 100,
              height: 100,
              color: Colors.red,
              child: Center(child: Text('点击我')),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

  1. 实际API可能不同：上面的代码是基于假设的API设计的。在实际使用中，你需要参考flutter_user_guidance插件的官方文档来了解其具体的API和使用方法。

  2. 定位Widget：在实际应用中，你可能需要使用GlobalKey或其他方法来定位你想要引导用户注意的widget。

  3. 回调处理：根据插件提供的API，你可以在用户完成引导后执行一些操作，比如更新UI状态或发送分析数据。

  4. 插件更新：由于插件可能会更新其API和功能，因此建议定期检查插件的官方文档和更新日志，以确保你的代码与最新版本兼容。

  5. 错误处理：在实际应用中，添加适当的错误处理逻辑来处理可能出现的异常情况，比如插件初始化失败或引导显示错误等。

回到顶部