Flutter覆盖层管理插件flutter_overlay_kit的使用

Flutter覆盖层管理插件flutter_overlay_kit的使用

Toast + alert + actionsheet

开始使用

本项目是一个Dart包的起点， 它是一个库模块，包含可以轻松共享到多个Flutter或Dart项目的代码。

对于如何开始使用Flutter，您可以查看我们的 在线文档，该文档提供了教程、示例、移动开发指南以及完整的API参考。

完整示例Demo

下面我们将通过一个完整的示例来展示如何使用flutter_overlay_kit插件。此示例将包括Toast、Alert和ActionSheet的使用方法。

步骤1: 添加依赖

首先，在pubspec.yaml文件中添加flutter_overlay_kit依赖：

dependencies:
  flutter_overlay_kit: ^1.0.0

然后运行flutter pub get命令来安装依赖。

步骤2: 导入库

在你的Flutter项目中导入flutter_overlay_kit库：

import 'package:flutter_overlay_kit/flutter_overlay_kit.dart';

步骤3: 使用Toast

Toast是一种短暂显示的消息提示，通常用于通知用户某些操作的结果。

void showToast() {
  OverlayKit.show(
    context: context,
    builder: (context) => ToastWidget(
      message: "这是一条Toast消息",
      duration: const Duration(seconds: 2),
    ),
  );
}

步骤4: 使用Alert

Alert是一种弹出窗口，通常用于显示重要的信息或确认用户的操作。

void showAlert() {
  OverlayKit.show(
    context: context,
    builder: (context) => AlertWidget(
      title: "警告",
      message: "你确定要删除吗？",
      actions: [
        AlertAction(
          text: "取消",
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        AlertAction(
          text: "确定",
          onPressed: () {
            Navigator.of(context).pop();
            // 执行删除操作
          },
        ),
      ],
    ),
  );
}

步骤5: 使用ActionSheet

ActionSheet是一种下拉菜单，通常用于提供多个选项供用户选择。

void showActionSheet() {
  OverlayKit.show(
    context: context,
    builder: (context) => ActionSheetWidget(
      title: "请选择一个选项",
      actions: [
        ActionSheetAction(
          text: "选项一",
          onPressed: () {
            Navigator.of(context).pop();
            // 处理选项一的操作
          },
        ),
        ActionSheetAction(
          text: "选项二",
          onPressed: () {
            Navigator.of(context).pop();
            // 处理选项二的操作
          },
        ),
      ],
    ),
  );
}

更多关于Flutter覆盖层管理插件flutter_overlay_kit的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter覆盖层管理插件flutter_overlay_kit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_overlay_kit 是一个用于在 Flutter 应用中管理和显示覆盖层的插件。它可以帮助你在应用的任何地方轻松地显示和隐藏覆盖层，例如加载指示器、对话框、通知等。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_overlay_kit: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本用法

  1. 初始化 OverlayKit

    在你的应用的根部件中，使用 OverlayKit 包裹你的应用。这样可以确保覆盖层能够在应用的任何地方使用。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OverlayKit(
      child: MaterialApp(
        title: 'Flutter Overlay Kit Demo',
        home: HomeScreen(),
      ),
    );
  }
}

  2. 显示覆盖层

    你可以使用 OverlayKit.of(context).showOverlay 方法来显示一个覆盖层。例如，显示一个加载指示器：

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

class HomeScreen extends StatelessWidget {
  void _showLoadingOverlay(BuildContext context) {
    OverlayKit.of(context).showOverlay(
      (context) => Center(
        child: CircularProgressIndicator(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Overlay Kit Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showLoadingOverlay(context),
          child: Text('Show Loading Overlay'),
        ),
      ),
    );
  }
}

  3. 隐藏覆盖层

    使用 OverlayKit.of(context).hideOverlay 方法来隐藏当前显示的覆盖层：

    void _hideLoadingOverlay(BuildContext context) {
  OverlayKit.of(context).hideOverlay();
}

高级用法

flutter_overlay_kit 还支持更复杂的场景，例如显示多个覆盖层、自定义动画、持续时间等。

  1. 自定义动画

    你可以通过 OverlayAnimation 来定义覆盖层的显示和隐藏动画：

    OverlayKit.of(context).showOverlay(
  (context) => Center(
    child: CircularProgressIndicator(),
  ),
  animation: OverlayAnimation(
    duration: Duration(milliseconds: 300),
    curve: Curves.easeInOut,
  ),
);

  2. 显示多个覆盖层

    你可以通过 key 参数来管理多个覆盖层：

    OverlayKit.of(context).showOverlay(
  (context) => Center(
    child: CircularProgressIndicator(),
  ),
  key: 'loading',
);

// 隐藏特定的覆盖层
OverlayKit.of(context).hideOverlay(key: 'loading');

  3. 自定义持续时间

    你可以设置覆盖层的持续时间，并在时间到达后自动隐藏：

    OverlayKit.of(context).showOverlay(
  (context) => Center(
    child: CircularProgressIndicator(),
  ),
  duration: Duration(seconds: 3),
);
回到顶部