ShowCaseView

Flutter 插件，允许您展示您在 iOS 和 Android 上的功能。

ShowCaseView

安装

  1. 将依赖项添加到 pubspec.yaml

    在pub.dev上“安装”标签页中获取最新版本

dependencies:
    showcaseview: ^0.1.1
  1. 导入包
import 'package:showcaseview/showcaseview.dart';
  1. 添加一个 ShowCaseWidget 小部件。
ShowCaseWidget(
  child: Somewidget(),
),
  1. 添加一个 Showcase 小部件。
GlobalKey _one = GlobalKey();
GlobalKey _two = GlobalKey();
GlobalKey _three = GlobalKey();

...

Showcase(
  key: _one,
  title: 'Menu',
  description: 'Click here to see menu options',
  child: Icon(
    Icons.menu,
    color: Colors.black45,
  ),
),

更多可选参数

Showcase(
  key: _two,
  title: 'Profile',
  description: 'Click here to go to your Profile',
  shapeBorder: CircleBorder(),
  showArrow: false,
  slideDuration: Duration(milliseconds: 1500),
  tooltipColor: Colors.blueGrey,
  child: ...,
),
  1. 使用Showcase.withWidget小部件。
Showcase.withWidget(
  key: _three,
  cHeight: 80,
  cWidth: 140,
  shapeBorder: CircleBorder(),
  container: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      ...
    ],
  ),
  child: ...,
),
  1. 开始 ShowCase
someEvent(){
    ShowCaseWidget.startShowCase(context, [_one, _two, _three]);
}

如果您想在UI构建完成后立即启动 ShowCaseView，请使用以下代码。

WidgetsBinding.instance.addPostFrameCallback((_) =>
        ShowCaseWidget.startShowCase(context, [_one, _two, _three]));

如何使用

请查看pub.dartlang.org上的示例应用程序或“示例”标签页，以获取更完整的示例。

GitHub

https://github.com/simformsolutions/flutter_showcaseview