Android | WebViewWidget flickers when loading and resizing another Web View

[LTPhantom]

Steps to reproduce

Given the sample code and running on Android phones/emulators, click the Reload button to Reload the second WebViewWidget.

Expected results

Second Web View disappears and reappears when it finished loading.

Actual results

For a brief time, the contents on the second WebView appears on the first WebView. Depending on the dimensions, they could look a little smeared.

Code sample

Code sample

class WebViewWithWebView extends StatefulWidget {
  @override
  _WebViewWithWebViewState createState() => _WebViewWithWebViewState();
}

class _WebViewWithWebViewState extends State<WebViewWithWebView> {
  bool _isWebReady = false;
  final WebViewController _controllerWeb1 = WebViewController();
  final WebViewController _controllerWeb2 = WebViewController();

  @override
  void initState() {
    super.initState();
    _controllerWeb1.loadRequest(Uri(host: 'google.com', scheme: 'https'));
    _controllerWeb2.setNavigationDelegate(NavigationDelegate(
      onPageFinished: (String url) {
        setState(() {
          _isWebReady = true;
        });
      }
    ));
    _controllerWeb2.loadRequest(Uri(host: 'dart.dev', scheme: 'https'));
    // _reload();
  }

  void _reload() {
    setState(() {
      _controllerWeb2.loadRequest(Uri(host: 'dart.dev', scheme: 'https'));
      _isWebReady = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('WebViews'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: WebViewWidget(
                controller: _controllerWeb1,
              ),
            ),
            if (_isWebReady)
              Container(
                height: AdSize.mediumRectangle.height.toDouble(),
                width: AdSize.mediumRectangle.width.toDouble(),
                child: WebViewWidget(
                  controller: _controllerWeb2,
                ),
              )
            else
              SizedBox.shrink(),
            ElevatedButton(
              onPressed: _reload,
              child: Text('Reload'),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

WebViewScreen_recording_20240523_125038.mp4

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[!] Flutter (Channel stable, 3.19.6, on macOS 14.5 23F79 darwin-arm64, locale en)
    • Flutter version 3.19.6 on channel stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (5 weeks ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update
      checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Platform android-34, build-tools 33.0.2
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version unknown)
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.17-11446219)

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio with Blaze.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.89.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64  • Android 13 (API 33) (emulator)
    • macOS (desktop)             • macos         • darwin-arm64   • macOS 14.5 23F79 darwin-arm64
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 125.0.6422.76

[✓] Network resources
    • All expected network resources are available.

[darshankawar]

Thanks for the report. I was able to see flicker upon reloading as shown in below video:

148991.mov

stable, master flutter doctor -v

[!] Flutter (Channel stable, 3.22.0, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.22.0 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5dcb86f68f (5 days ago), 2024-05-09 07:39:20 -0500
    • Engine revision f6344b75dc
    • Dart version 3.4.0
    • DevTools version 2.34.3
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.22.0-45.0.pre.3, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.22.0-45.0.pre.3 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fe0932f2c0 (4 hours ago), 2024-05-22 22:19:25 -0400
    • Engine revision b8b82454e3
    • Dart version 3.5.0 (build 3.5.0-178.0.dev)
    • DevTools version 2.36.0-dev.10
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/dhs/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 65.1.4
    • Dart plugin version 213.7228

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.29.0

[✓] Connected device (3 available)
    • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
      • iOS 15.3.1 19D52
    • macOS (desktop)           • macos                                    •
      darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)              • chrome                                   •
      web-javascript • Google Chrome 109.0.5414.119

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
      
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

runnable code

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

void main() {
  runApp(MaterialApp(
    home: WebViewWithWebView(),
  ));
}

class WebViewWithWebView extends StatefulWidget {
  @override
  _WebViewWithWebViewState createState() => _WebViewWithWebViewState();
}

class _WebViewWithWebViewState extends State<WebViewWithWebView> {
  bool _isWebReady = false;
  final WebViewController _controllerWeb1 = WebViewController();
  final WebViewController _controllerWeb2 = WebViewController();

  @override
  void initState() {
    super.initState();
    _controllerWeb1.loadRequest(Uri(host: 'google.com', scheme: 'https'));
    _controllerWeb2.setNavigationDelegate(NavigationDelegate(
        onPageFinished: (String url) {
          setState(() {
            _isWebReady = true;
          });
        }
    ));
    _controllerWeb2.loadRequest(Uri(host: 'dart.dev', scheme: 'https'));
    // _reload();
  }

  void _reload() {
    setState(() {
      _controllerWeb2.loadRequest(Uri(host: 'dart.dev', scheme: 'https'));
      _isWebReady = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('WebViews'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: WebViewWidget(
                controller: _controllerWeb1,
              ),
            ),
            if (_isWebReady)
              Container(
                height: 100,
                width: 100,
                child: WebViewWidget(
                  controller: _controllerWeb2,
                ),
              )
            else
              SizedBox.shrink(),
            ElevatedButton(
              onPressed: _reload,
              child: Text('Reload'),
            ),
          ],
        ),
      ),
    );
  }
}

[reidbaker]

@johnmccutchan Do you expect that the behavior seen here is a generic platform view problem as opposed to one with the webview implementation on android?

[johnmccutchan]

I suspect this is a generic platform view problem. We probably have a frame where the size of the platform view is wrong leading to the fullscreen flicker.