Flutter援助乌克兰信息展示插件help_ukraine_widget的使用

Flutter援助乌克兰信息展示插件help_ukraine_widget的使用

概述

这是一个将帮助乌克兰的小部件移植到Flutter平台上的插件。该小部件可以帮助你的应用用户了解他们如何从世界各地帮助乌克兰。

展示

功能

通过在你的应用中安装这个小部件，你可以帮助结束乌克兰的战争。它提供了以下链接：

• 捐款
• 分享这个小部件
• 和其他支持乌克兰的方式

开始使用

首先，在你的 pubspec.yaml 文件中添加插件依赖：

dependencies:
    help_ukraine_widget: <最新版本>

然后，在你的代码中导入这个包：

import 'package:help_ukraine_widget/help_ukraine_widget.dart';

使用方法

基本用法

使用 OverlayWidget 来使小部件浮动并定位在你的应用之上：

OverlayWidget(
    alignment: Alignment.bottomRight, // 小部件的位置
    overlayWidget: HorizontalHelpWidget(), // 小部件的类型
    child: MyApp(), // 应用主体
)

自定义

你也可以创建自定义的小部件变体：

// 我们在这里使用了这些选项，但你可以根据需要进行调整
final order = [HelpWidgetView.collapsed, HelpWidgetView.main, HelpWidgetView.options];

final _controller = TraverseController(order);

HelpWidget(
    controller: _controller, // 控制器
    // 包含资源链接的视图
    optionsView: ...,
    // 用户看到的第一个默认视图
    mainView: ...,
    // 最小化视图，不会阻碍用户使用应用，但仍存在于屏幕上
    collapsedView: ...,
    // 视图之间过渡动画的轴
    axis: ...,
)

感谢

感谢 jiffsy.co 和 Gearheart 设计并创建了 原始的小部件。

完整示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用help_ukraine_widget插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Help Ukraine Widget Example')),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
        floatingActionButton: OverlayWidget(
          alignment: Alignment.bottomRight,
          overlayWidget: HorizontalHelpWidget(),
          child: Container(
            color: Colors.white,
            width: 200,
            height: 200,
            child: Center(child: Text('Main Content')),
          ),
        ),
      ),
    );
  }
}