Flutter功能引导插件flutter_feature

Flutter功能引导插件flutter_feature_tour的使用

在Flutter应用中，flutter_feature_tour 是一个功能强大且可自定义的功能引导包，用于创建引人入胜的应用引导体验，并突出显示应用的关键功能。

示例演示

查看演示截图

USimulator Screenshot - iPhone 16 Pro - 2024-11-11 at 21.54.38

USimulator Screenshot - iPhone 16 Pro - 2024-11-11 at 21.54.46

USimulator Screenshot - iPhone 16 Pro - 2024-11-11 at 21.54.52

USimulator Screenshot - iPhone 16 Pro - 2024-11-11 at 21.55.03

USimulator Screenshot - iPhone 16 Pro - 2024-11-11 at 21.55.30

Ufeatur 4

Ufeature-mac

Ufeature 2

Ufeature 3

特性

🎨 使用 FeatureTourTheme 进行自定义样式
🔦 多种高亮形状（圆形、矩形、自定义路径）
📊 分析集成
🖼️ 在引导步骤中添加交互元素
🎭 平滑的动画和过渡
💾 持久性和状态管理
⚓ 无障碍特性
🧪 测试工具

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_feature_tour: ^1.0.0

然后运行：

flutter pub get

使用

基本设置

导入包：

import 'package:flutter_feature_tour/flutter_feature_tour.dart';

创建 OnboardingService 实例：

final OnboardingService _onboardingService = OnboardingService();

设置功能高亮：

void _setupOnboarding() {
  _onboardingService.addFeatureHighlightStep([
    FeatureHighlight(
      targetKey: _searchKey,
      title: '搜索',
      description: '快速查找你需要的东西。使用我们的强大搜索功能。',
      icon: Icons.search,
      shape: HighlightShape.circle,
    ),
  ]);

  _onboardingService.addFeatureHighlightStep([
    FeatureHighlight(
      targetKey: _profileKey,
      title: '个人资料',
      description: '在这里查看和编辑你的个人信息。',
      icon: Icons.person,
      shape: HighlightShape.rectangle,
    ),
  ]);
}

启动引导流程：

_onboardingService.startOnboarding(context);

自定义

通过 FeatureTourTheme 自定义引导主题：

_onboardingService.setTheme(FeatureTourTheme(
  overlayColor: Colors.black87,
  highlightColor: Colors.amber,
  cardColor: Colors.grey[900]!,
  textColor: Colors.white,
  primaryColor: Colors.amber,
  titleStyle: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  bodyStyle: const TextStyle(fontSize: 16),
  buttonStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
  cornerRadius: 12.0,
  highlightBorderWidth: 3.0,
));

你也可以使用应用程序的主题：

_onboardingService.setTheme(FeatureTourTheme.fromTheme(Theme.of(context)));

分析

集成分析以跟踪用户参与度：

_onboardingService.setAnalyticsCallback((String event, Map<String, dynamic> properties) {
  // 实现你的分析追踪
  print('Analytics Event: $event, Properties: $properties');
});

该包跟踪以下事件：

onboarding_started
onboarding_restarted
step_viewed
step_completed
onboarding_completed

交互元素

在引导步骤中添加交互元素：

_onboardingService.setInteractiveWidgetBuilder((BuildContext context, VoidCallback onComplete) {
  return ElevatedButton(
    child: Text('试一试！'),
    onPressed: () {
      // 模拟操作
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('你尝试了这个功能！')),
      );
      onComplete();
    },
  );
});

动画和过渡

该包包括平滑的覆盖层出现和高亮过渡动画。这些由 FeatureHighlightOverlay 小部件自动处理。

持久性

引导进度会自动保存使用Hive。检查是否已完成引导：

bool onboardingCompleted = await _onboardingService.isOnboardingCompleted();

要重新启动引导过程：

_onboardingService.restartOnboarding(context);

无障碍性

该包包括基本的无障碍特性：

覆盖层和按钮的语义标签
支持键盘导航（Tab、Shift+Tab、Enter、Space）

测试

为了便于测试，可以使用以下方法：

testWidgets('Feature tour test', (WidgetTester tester) async {
  await tester.pumpWidget(MyApp());

  // 启动引导
  await tester.tap(find.byType(StartOnboardingButton));
  await tester.pumpAndSettle();

  expect(find.byType(FeatureHighlightOverlay), findsOneWidget);
  expect(find.text('搜索'), findsOneWidget);

  // 点击下一步按钮
  await tester.tap(find.text('下一步'));
  await tester.pumpAndSettle();

  expect(find.text('个人资料'), findsOneWidget);
});

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

vueper 1楼

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

当然，以下是一个关于如何使用 flutter_feature_tour 插件的示例代码。这个插件用于在应用内创建功能引导，帮助用户了解应用的新特性或功能。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_feature_tour: ^0.2.0  # 请注意版本号，使用最新的稳定版本

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

接下来，你可以在 Dart 代码中设置和使用 flutter_feature_tour。以下是一个简单的示例：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  late FeatureTourController _featureTourController;

  @override
  void initState() {
    super.initState();
    // 初始化 FeatureTourController
    _featureTourController = FeatureTourController(
      context,
      steps: [
        FeatureTourStep(
          target: Find.byType('MyTargetWidget'),  // 指定目标小部件的类型
          title: 'Feature Title',
          description: 'This is a description of the feature.',
          placement: Placement.bottom,
        ),
        // 可以添加更多步骤
      ],
      onEnd: () {
        // 当引导结束时执行的回调
        print('Tour ended');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Feature Tour Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 目标小部件
            MyTargetWidget(),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 开始功能引导
                _featureTourController.start();
              },
              child: Text('Start Tour'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 释放资源
    _featureTourController.dispose();
    super.dispose();
  }
}

// 示例目标小部件
class MyTargetWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.red,
      child: Center(
        child: Text(
          'Target',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

在 pubspec.yaml 中添加了 flutter_feature_tour 依赖。
创建了一个简单的 Flutter 应用。
在 _MyHomePageState 中初始化了 FeatureTourController，并定义了一个功能引导步骤，指定了目标小部件（MyTargetWidget），标题，描述和位置。
在页面上添加了一个按钮，当用户点击按钮时，会开始功能引导。
实现了在 dispose 方法中释放 FeatureTourController 的资源。

请确保在实际使用中根据具体需求调整目标小部件的选择器（Find.byType、Find.byKey 等），以及其他引导步骤的配置。

Flutter功能引导插件flutter_feature_tour的使用