一个强大的 Flutter 包，允许您突出显示特定部分

BubbleShowcase

BubbleShowcase 是一个小型但功能强大的 Flutter 包，它允许您突出显示应用程序的特定部分（例如，向用户解释它们）或展示您应用程序的新功能。

入门

该包易于使用。
看看下面的代码片段（它使用了 speech_bubble）

BubbleShowcase(
  bubbleShowcaseId: 'my_bubble_showcase',
  bubbleShowcaseVersion: 1,
  bubbleSlides: [
    RelativeBubbleSlide(
      widgetKey: widgetToHighlightKey,
      child: RelativeBubbleSlideChild(
        direction: AxisDirection.right,
        widget: SpeechBubble(
          nipLocation: NipLocation.LEFT,
          color: Colors.blue,
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Text(
              'This is a new cool feature !',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    ),
  ],
  child: MyMainWidget(),
);

它仅使用一个 `BubbleSlide` 创建了一个 `BubbleShowcase` 小部件。
此幻灯片将突出显示持有 `widgetToHighlightKey` 键的小部件。
语音气泡将放置在小部件的右侧。

BubbleShowcase 不仅限于突出显示特定小部件。您还可以通过其坐标来突出显示应用程序的特定部分

BubbleShowcase(
  bubbleShowcaseId: 'my_bubble_showcase',
  bubbleShowcaseVersion: 1,
  bubbleSlides: [
    AbsoluteBubbleSlide(
      positionCalculator: (size) => Position(
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      ),
      child: AbsoluteBubbleSlideChild(
        positionCalculator: (size) => Position(
          top: 0,
          left: 0,
        ),
        widget: SpeechBubble(
          nipLocation: NipLocation.LEFT,
          color: Colors.blue,
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Text(
              'This is the top left corner of your app.',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    ),
  ],
  child: MyMainWidget(),
);

这将显示应用程序顶角左侧的语音气泡。

选项

展示

展示是所有开始的地方。让我们看看可用的选项

• bubbleShowcaseId 展示的标识符。在应用程序中必须是唯一的，因为它用作保存方式；例如，当不应重新打开展示时（必需）。
• bubbleShowcaseVersion 展示的版本。更新展示时增加它，当 `doNotReopenOnClose` 设置为 `true` 时，这允许重新将其显示给用户（必需）。
• doNotReopenOnClose 关闭后是否应重新打开此展示。
• bubbleSlides 要显示的幻灯片（必需 & 不得为空）。
• child 在幻灯片下方显示的小部件。应该是您应用程序的主小部件。
• counterText 当前幻灯片计数器文本。`:i` 指当前幻灯片编号，`:n` 指幻灯片总数。
• showCloseButton 是否在幻灯片左上角显示一个小的关闭按钮。

幻灯片

幻灯片是突出显示您应用程序特定部分的内容。
有两种主要的位置类别：绝对 和 相对。这是一个小总结

所有幻灯片都有这些共同的选项

• shape 幻灯片形状（可用的有 `Rectangle`、`RoundedRectangle`、`Oval` 和 `Circle`，但您可以通过扩展 `Shape` 类来添加自定义形状）。
• boxShadow 幻灯片阴影（包含颜色、模糊半径、扩展半径等）。
• child 幻灯片子项，见下文（必需）。

幻灯片子项

幻灯片子项是根据您突出显示的内容显示的（例如，它可以是语音气泡）。
相同的定位系统也适用于子项

所有子项都有这些共同的选项

• widget 要显示的小部件（必需）。

但您还有更多选项！
不要犹豫查看 API Reference 或 Github 仓库。

GitHub

https://github.com/Skyost/BubbleShowcase