flutter anchored onboarding screen

build

License: MIT

Pal 小部件

一个用于更好入门的 Flutter 包。

一套用于您的 Flutter 应用程序的精美入门小部件。

安装包

添加到您的 pubspec.yaml 依赖项中

pal-widgets: 0.0.1+4


助手列表

名称 描述 状态
AnchoredHelper 一个助手,用于描述您页面上的另一个小部件。这会在您的页面上方创建一个覆盖层

锚定助手

这个小部件深受 Google 入门教程的启发。它可以显示您想要的任何小部件周围的圆圈,并添加一个覆盖层,您可以在其中添加
消息。

首先,使用 HelperOrchestrator 小部件嵌入您的页面或应用程序。

HelperOrchestrator(
    child: Scaffold(
        appBar: AppBar(
            title: Text(widget.title),
        ),
        body: ...
    ),
)

您现在可以使用 _text1 键来引用您想要的小部件

Text(
    '$_counter',
    key: HelperOrchestrator.of(context).generateKey('text1'),
),

示例

您现在可以使用以下方法显示锚定助手

final helper = AnchoredHelper(
    anchorKeyId: 'text1',
    title: const Text('Title lorem pitume'),
    description: const Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum'),,
    bgColor: Colors.blue,
    negativText: const Text('cancel'),
    positivText: const Text('Ok, understood'),
    onError: () => print("widget not found"),
    positivBtnStyle: helperOutlineBtnStyle,
    negativeBtnStyle: helperOutlineBtnStyle,
    onNegativTap: () => HelperOrchestrator.of(context).hideHelper(),
    onPositivTap: () => HelperOrchestrator.of(context).hideHelper(),
    onTapAnchor: () => HelperOrchestrator.of(context).hideHelper(),
    onTapAnchor: () => HelperOrchestrator.of(context).hideHelper(),
);

// this will show an overlayed anchored widget using the key text1
HelperOrchestrator.of(context).showAnchoredHelper('text1', helper);

属性

属性 描述 必需
anchorKeyId [HelperOrchestrator] 创建的 [Key] 的引用
title 作为标题显示的 Text 小部件
描述 作为描述显示的 Text 小部件
bgColor 作为覆盖背景的 Color
negativText 显示在负按钮中的 [Text] 小部件
positivText 显示在正按钮中的 [Text] 小部件
onPositivTap 点击正按钮时执行的操作
onNegativTap 点击负按钮时执行的操作
onError 当小部件遇到任何错误时调用的函数
negativeBtnStyle 应用在负按钮上的 Material 样式
positivBtnStyle 应用在正按钮上的 Material 样式
onTapAnchor 用户点击锚点时调用的操作
widgetFactory 用于创建锚定助手的 Widget 工厂。默认为 AnchoredHoleHelper.anchorFactory,它会创建一个带有动画孔的全覆盖

有什么问题吗?

请在 我们的 Twitter 上联系我们,或发送电子邮件至 gautier[@@]pal-plugin.tech

GitHub

查看 Github