How to pause a WebView in flutter? How to pause a WebView in flutter? dart dart

How to pause a WebView in flutter?


Got the same issue on Android side with webview_flutter: ^0.3.18+1.I found a solution to pause the video by requesting audio focus again in the onPause callback of host Activity.

val audioManager = activity.getSystemService(Context.AUDIO_SERVICE) as AudioManagerif (audioManager.isMusicActive) {    if (Utils.hasOreoSDK26()) {        val audioAttributes = AudioAttributes.Builder()                .setUsage(AudioAttributes.USAGE_MEDIA)                .setContentType(AudioAttributes.CONTENT_TYPE_MUSIC)                .build()        val audioFocusRequest = AudioFocusRequest.Builder(AudioManager.AUDIOFOCUS_GAIN_TRANSIENT)                .setAudioAttributes(audioAttributes)                .setAcceptsDelayedFocusGain(true)                .setWillPauseWhenDucked(true)                .setOnAudioFocusChangeListener(                        { focusChange -> Timber.i(">>> Focus change to : %d", focusChange) },                        Handler())                .build()        audioManager.requestAudioFocus(audioFocusRequest)    } else {        audioManager.requestAudioFocus({ }, AudioManager.STREAM_MUSIC,                AudioManager.AUDIOFOCUS_GAIN_TRANSIENT)    }}

Also check this issue.


It's not possible from Dart using the webview_flutter plugin.However, you can use my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews.

It implements methods to pause/resume the WebView.

For Android, you can use InAppWebViewController.android.pause and InAppWebViewController.android.resume to pause and resume WebView.You should implement WidgetsBindingObserver in your Widget and check AppLifecycleState state through didChangeAppLifecycleState() method.

If you need to pause/resume also JavaScript execution you can use InAppWebViewController.pauseTimers/InAppWebViewController.resumeTimers methods.

Here is an example with a YouTube URL:

import 'dart:async';import 'dart:io';import 'package:flutter/material.dart';import 'package:flutter_inappwebview/flutter_inappwebview.dart';Future main() async {  WidgetsFlutterBinding.ensureInitialized();  runApp(MyApp());}class MyApp extends StatefulWidget {  @override  _MyAppState createState() => new _MyAppState();}class _MyAppState extends State<MyApp> with WidgetsBindingObserver {  InAppWebViewController webView;  @override  void initState() {    WidgetsBinding.instance.addObserver(this);    super.initState();  }  @override  void dispose() {    WidgetsBinding.instance.removeObserver(this);    super.dispose();  }  @override  void didChangeAppLifecycleState(AppLifecycleState state) {    print('state = $state');    if (webView != null) {      if (state == AppLifecycleState.paused) {        webView.pauseTimers();        if (Platform.isAndroid) {          webView.android.pause();        }      } else {        webView.resumeTimers();        if (Platform.isAndroid) {          webView.android.resume();        }      }    }  }  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(          title: const Text('InAppWebView Example'),        ),        body: Container(            child: Column(children: <Widget>[          Expanded(              child: InAppWebView(            initialUrl: "https://www.youtube.com/watch?v=NfNdXgJZfFo",            initialHeaders: {},            initialOptions: InAppWebViewGroupOptions(              crossPlatform: InAppWebViewOptions(                debuggingEnabled: true,              ),            ),            onWebViewCreated: (InAppWebViewController controller) {              webView = controller;            },            onLoadStart: (InAppWebViewController controller, String url) {},            onLoadStop: (InAppWebViewController controller, String url) {},          ))        ])),      ),    );  }}