Flutter如何实现悬浮窗功能（去除广告推广）

在Flutter中如何实现悬浮窗功能？我需要在应用中显示一个始终悬浮在其他界面之上的小窗口，但不需要任何广告推广内容。请问有哪些可靠的方法或插件可以实现这个功能？最好能提供详细的实现步骤或代码示例。

2 回复

Flutter实现悬浮窗功能可通过Overlay或SystemAlertWindow插件实现。需申请悬浮窗权限，创建悬浮Widget并全局显示。去除广告需自行开发或使用无广告插件。

更多关于Flutter如何实现悬浮窗功能（去除广告推广）的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现悬浮窗功能，可以通过以下步骤完成：

1. 使用 Overlay 实现应用内悬浮窗

适用于应用内悬浮，不依赖系统权限。

import 'package:flutter/material.dart';

class FloatingWindow extends StatefulWidget {
  @override
  _FloatingWindowState createState() => _FloatingWindowState();
}

class _FloatingWindowState extends State<FloatingWindow> {
  OverlayEntry? _overlayEntry;
  bool _isVisible = false;

  // 创建悬浮窗
  void _createFloatingWindow() {
    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        top: 100,
        right: 20,
        child: Material(
          color: Colors.transparent,
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(10),
            ),
            child: IconButton(
              icon: Icon(Icons.close, color: Colors.white),
              onPressed: _removeFloatingWindow,
            ),
          ),
        ),
      ),
    );
    Overlay.of(context).insert(_overlayEntry!);
    setState(() => _isVisible = true);
  }

  // 移除悬浮窗
  void _removeFloatingWindow() {
    _overlayEntry?.remove();
    setState(() => _isVisible = false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('悬浮窗示例')),
      body: Center(
        child: ElevatedButton(
          onPressed: _isVisible ? _removeFloatingWindow : _createFloatingWindow,
          child: Text(_isVisible ? '关闭悬浮窗' : '打开悬浮窗'),
        ),
      ),
    );
  }
}

2. 系统级悬浮窗（需要权限）

适用于跨应用显示，需动态申请系统悬浮窗权限。

Android端配置：

  • 在 AndroidManifest.xml 添加权限：
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  • 使用 flutter_overlay_window 插件：
dependencies:
  flutter_overlay_window: ^1.0.0

代码示例：

import 'package:flutter_overlay_window/flutter_overlay_window.dart';

// 请求权限并显示悬浮窗
void showSystemFloating() async {
  if (await FlutterOverlayWindow.isPermissionGranted()) {
    await FlutterOverlayWindow.showOverlay();
  } else {
    FlutterOverlayWindow.requestPermission();
  }
}

注意事项：

  1. 系统悬浮窗需手动授权：用户需在设置中开启“悬浮窗权限”。
  2. iOS限制：iOS不支持系统级悬浮窗，仅能实现应用内悬浮。
  3. 内存管理：及时移除 OverlayEntry 避免内存泄漏。

以上方法可帮助您实现无广告的悬浮窗功能，请根据需求选择合适方案。

回到顶部