Flutter覆盖层支持插件overlay_support的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter覆盖层支持插件overlay_support的使用

overlay_support

Pub CI codecov

overlay_support插件为Flutter提供覆盖层的支持，使开发者可以轻松地构建toast和应用内通知。这个库支持所有平台。

如何使用

1. 添加依赖到项目的pubspec.yaml文件中

dependencies:
    overlay_support: latest_version
  • 最新版本是 Pub
  • 对于尚未迁移到null安全性的项目，请使用版本 overlay_support: 1.0.5-hotfix1

2. 使用OverlaySupport包裹你的AppWidget

return OverlaySupport.global(child: MaterialApp());

3. 显示Toast或简单的通知

import 'package:overlay_support/overlay_support.dart';

void onClick() {
    // 弹出一个toast。
    toast('Hello world!');

    // 在屏幕顶部显示一个简单的通知。
    showSimpleNotification(
        Text("这是一个来自简单通知的消息"),
        background: Colors.green);
}

更多用法请参考：example/README.md

示例Demo

下面是一个完整的示例demo，展示了如何在Flutter项目中使用overlay_support插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OverlaySupport.global(
      child: MaterialApp(
        title: 'Overlay Support Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlay Support Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                // 弹出一个toast。
                toast('Hello world!');
              },
              child: Text('Show Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 在屏幕顶部显示一个简单的通知。
                showSimpleNotification(
                  Text("这是一个来自简单通知的消息"),
                  background: Colors.green,
                );
              },
              child: Text('Show Simple Notification'),
            ),
          ],
        ),
      ),
    );
  }
}

此代码创建了一个简单的Flutter应用程序，其中包含两个按钮，分别用于展示Toast和简单的通知。通过点击这些按钮，您可以测试overlay_support插件的功能。

如果您有任何建议或意见，欢迎在GitHub Issues中提出，这将极大地帮助改进此项目的可用性。感谢您的支持！


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用overlay_support插件来创建覆盖层的代码示例。overlay_support插件允许你在Flutter应用中创建覆盖在其他内容之上的浮动层，常用于显示模态对话框、加载指示器等。

首先，确保你已经将overlay_support添加到你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  overlay_support: ^1.2.1  # 请检查最新版本号

然后，运行flutter pub get来安装该插件。

接下来，是一个完整的示例，展示了如何使用overlay_support插件来显示一个简单的覆盖层：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OverlaySupport.multi(
      // 使用 OverlaySupport.multi 包装 MaterialApp
      child: MaterialApp(
        title: 'Flutter Overlay Support Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  OverlayEntry? _overlayEntry;

  void _showOverlay() {
    // 创建一个 OverlayEntry
    _overlayEntry = OverlayEntry(
      builder: (context) => Material(
        elevation: 4.0,
        child: Container(
          padding: EdgeInsets.all(16.0),
          color: Colors.white,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('这是一个覆盖层'),
              SizedBox(height: 16.0),
              ElevatedButton(
                onPressed: () {
                  // 关闭覆盖层
                  _overlayEntry?.remove();
                  _overlayEntry = null;
                },
                child: Text('关闭'),
              ),
            ],
          ),
        ),
      ),
    );

    // 获取 OverlayState 并添加 OverlayEntry
    Overlay.of(context)?.insert(_overlayEntry!);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlay Support Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showOverlay,
          child: Text('显示覆盖层'),
        ),
      ),
    );
  }
}

解释

  1. 依赖引入：在pubspec.yaml文件中添加overlay_support依赖。

  2. 应用入口：在main.dart中，使用OverlaySupport.multi包装MaterialApp。这是为了确保Overlay能够全局可用。

  3. 覆盖层管理：在_MyHomePageState中，定义一个OverlayEntry? _overlayEntry来管理覆盖层。

  4. 显示覆盖层：在_showOverlay方法中，创建一个OverlayEntry并设置其内容。然后使用Overlay.of(context)?.insert(_overlayEntry!)将覆盖层添加到当前的Overlay中。

  5. 关闭覆盖层：在覆盖层内部，使用一个按钮调用_overlayEntry?.remove()来移除覆盖层，并将_overlayEntry置为null。

这个示例展示了如何使用overlay_support插件在Flutter应用中创建和管理覆盖层。希望这个示例对你有帮助！

回到顶部