Flutter关闭WebView后嵌入YouTube视频音频仍播放的问题

我之前也踩过这个坑！用flutter_webview_plugin的WebviewScaffold通过MaterialPageRoute打开后，返回时WebView其实没被完全销毁，导致音频还在后台偷偷播放。官网示例没覆盖这个场景，给你两个实测有效的解决办法：

方法一：抽成独立页面，利用生命周期手动销毁WebView #

把WebView封装成独立的StatefulWidget，在页面销毁时主动调用插件的销毁方法，彻底终止原生WebView实例：

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

class WebViewPage extends StatefulWidget {
  final String targetUrl;
  const WebViewPage(this.targetUrl, {super.key});

  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  final FlutterWebviewPlugin _webviewPlugin = FlutterWebviewPlugin();

  @override
  void dispose() {
    // 销毁原生WebView实例，彻底中断音频
    _webviewPlugin.dispose();
    // 也可以用加载空白页的方式替代：_webviewPlugin.reloadUrl("about:blank");
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: widget.targetUrl,
      appBar: AppBar(
        title: const Text("flutter"),
        backgroundColor: Colors.black,
      ),
    );
  }
}

然后修改你的跳转代码：

Navigator.of(videoContext).push(MaterialPageRoute(
  builder: (context) {
    return WebViewPage("https://www.youtube.com/embed/fq4N0hgOWzU");
  },
));

方法二：监听路由变化，自动处理 #

如果不想单独抽页面，也可以在当前页面监听路由弹出事件，返回时自动清理WebView：

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

// 先定义路由观察者
final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();
final FlutterWebviewPlugin _webviewPlugin = FlutterWebviewPlugin();

// 在你的页面State中添加监听逻辑
class _YourPageState extends State<YourPage> with RouteAware {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 订阅路由变化
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPopNext() {
    // 从WebView页面返回时，执行清理
    _webviewPlugin.dispose();
  }

  // 你的原有跳转代码
  void _openWebView() {
    Navigator.of(videoContext).push(MaterialPageRoute(
      builder: (context) {
        return WebviewScaffold(
          url: "https://www.youtube.com/embed/fq4N0hgOWzU",
          appBar: AppBar(
            title: const Text("flutter"),
            backgroundColor: Colors.black,
          ),
        );
      },
    ));
  }

  @override
  Widget build(BuildContext context) {
    // ...原有页面布局
  }
}

// 记得在MaterialApp中注册路由观察者
MaterialApp(
  navigatorObservers: [routeObserver],
  // ...其他配置
)

问题根源 #

WebviewScaffold依赖插件的原生WebView实例，用MaterialPageRoute关闭页面时，插件不会自动销毁这个原生实例，导致原生层的WebView还在后台加载音频内容，所以声音停不下来。手动调用dispose()会彻底销毁原生实例，或者加载空白页直接中断音频播放。

内容的提问来源于stack exchange，提问作者UpaJah