Flutter动态悬浮窗插件floating_dynamic_island的使用

Flutter动态悬浮窗插件floating_dynamic_island的使用

在Flutter应用中，有时候我们需要实现类似于iOS的动态悬浮窗效果。这时可以借助floating_dynamic_island插件来实现。本教程将详细讲解如何使用该插件，并提供一个完整的示例Demo。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  floating_dynamic_island: ^0.1.0

然后运行flutter pub get以获取新的依赖项。

使用插件

接下来，我们将通过一个简单的示例展示如何创建并使用floating_dynamic_island。

示例代码
import 'package:flutter/material.dart';
import 'package:floating_dynamic_island/floating_dynamic_island.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  // 控制悬浮窗的显示与隐藏
  bool _isFloatingIslandVisible = false;

  // 创建悬浮窗的函数
  void _createFloatingIsland() {
    setState(() {
      _isFloatingIslandVisible = true;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('浮动动态岛示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _createFloatingIsland,
          child: Text('创建浮动岛'),
        ),
      ),
      floatingActionButton: _isFloatingIslandVisible ? FloatingDynamicIsland(
        // 设置悬浮窗的位置
        position: FloatingPosition(left: 20, top: 100),
        // 设置悬浮窗的大小
        size: FloatingSize(width: 200, height: 100),
        // 悬浮窗的内容
        child: Container(
          color: Colors.blue,
          child: Center(child: Text('这是一个浮动岛', style: TextStyle(color: Colors.white))),
        ),
      ) : null,
    );
  }
}

更多关于Flutter动态悬浮窗插件floating_dynamic_island的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动态悬浮窗插件floating_dynamic_island的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


floating_dynamic_island 是一个 Flutter 插件，用于在 Android 和 iOS 设备上创建动态悬浮窗（类似于 iOS 的 Dynamic Island）。它可以帮助你在应用内或应用外显示悬浮窗口，用于显示通知、控制音乐播放、显示系统信息等。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  floating_dynamic_island: ^1.0.0  # 请使用最新版本

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

使用插件

1. 初始化插件

在使用插件之前，你需要在 main.dart 中初始化插件：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FloatingDynamicIsland.initialize();
  runApp(MyApp());
}

2. 显示悬浮窗

你可以使用 FloatingDynamicIsland.show 方法来显示悬浮窗。以下是一个简单的例子：

FloatingDynamicIsland.show(
  context: context,
  child: Container(
    width: 200,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(20),
    ),
    child: Center(
      child: Text(
        'Dynamic Island',
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
);

3. 隐藏悬浮窗

你可以使用 FloatingDynamicIsland.hide 方法来隐藏悬浮窗：

FloatingDynamicIsland.hide();

4. 自定义悬浮窗行为

你可以通过 FloatingDynamicIsland 的配置选项来自定义悬浮窗的行为，例如设置悬浮窗的位置、大小、动画等。

FloatingDynamicIsland.show(
  context: context,
  child: Container(
    width: 200,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(20),
    ),
    child: Center(
      child: Text(
        'Dynamic Island',
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
  position: FloatingPosition.topCenter,
  animationDuration: Duration(milliseconds: 500),
  onTap: () {
    print('Floating Island tapped!');
  },
);

注意事项

  • 权限：在 Android 上，悬浮窗需要 SYSTEM_ALERT_WINDOW 权限。你需要在 AndroidManifest.xml 中添加以下权限：

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
回到顶部