Skip to content

Flickering when switching between tabs in TabBarView when there is a InAppWebView #2742

@Evgenia-bit

Description

@Evgenia-bit

Is there an existing issue for this?

  • I have searched the existing issues

Current Behavior

When switching between tabs where there is a InAppWebView, there is a flicker (see video).

Expected Behavior

It is necessary that switching between tabs where there is a InAppWebView takes place without flickering.

Steps with code example to reproduce

Steps with code example to reproduce
  1. Create a screen with TabBar and TabBarView, where one of the tabs will contain InAppWebView (see code example)
  2. Quickly switch from the tab containing the InAppWebView to the next one. The flicker will be played periodically.
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'TabView Demo',
      home: TabViewScreen(),
    );
  }
}

class TabViewScreen extends StatefulWidget {
  const TabViewScreen({super.key});

  @override
  State<TabViewScreen> createState() => _TabViewScreenState();
}

class _TabViewScreenState extends State<TabViewScreen>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 6, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        bottom: TabBar(
          controller: _tabController,
          isScrollable: true,
          indicatorSize: TabBarIndicatorSize.tab,
          indicatorWeight: 3,
          tabs: const [
            Tab(text: 'Main'),
            Tab(text: 'Search'),
            Tab(text: 'Favorites'),
            Tab(text: 'Settings'),
            Tab(text: 'WebView'),
            Tab(text: 'Profile'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          const Placeholder(),
          const Placeholder(),
          const Placeholder(),
          const Placeholder(),
          InAppWebView(
            initialUrlRequest: URLRequest(url: WebUri('https://flutter.dev')),
          ),
          const Placeholder(),
        ],
      ),
    );
  }
}

Flutter doctor

[✓] Flutter (Channel stable, 3.38.2, on macOS 26.1 25B78 darwin-arm64, locale ru-RU) [404ms]
    • Flutter version 3.38.2 on channel stable at /Users/.../fvm/versions/3.38.2
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f5a8537f90 (22 hours ago), 2025-11-18 09:27:21 -0500
    • Engine revision b5990e5ccc
    • Dart version 3.10.0
    • DevTools version 2.51.1
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop,
      enable-android, enable-ios, cli-animations, enable-native-assets, omit-legacy-version-file,
      enable-lldb-debugging

[!] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [1 592ms]
    • Android SDK at /Users/.../Library/Android/sdk
    • Emulator version 35.6.11.0 (build_id 13610412) (CL:N/A)
    • Platform android-36, build-tools 36.0.0
    • ANDROID_HOME = /Users/.../Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/.../Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment Temurin-17.0.14+7 (build 17.0.14+7)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 26.0.1) [962ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 17A400
    • CocoaPods version 1.16.2

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

[✓] Connected device (5 available) [6,0s]
    • SM A325F (mobile)           • RF8R80JECRZ               • android-arm64  • Android 13 (API 33)
    • sdk gphone64 arm64 (mobile) • emulator-5554             • android-arm64  • Android 15 (API 35) (emulator)
    • iPhone (wireless) (mobile)  • 00008120-001618A11120C01E • ios            • iOS 18.6.2 22G100
    • macOS (desktop)             • macos                     • darwin-arm64   • macOS 26.1 25B78 darwin-arm64
    • Chrome (web)                • chrome                    • web-javascript • Google Chrome 142.0.7444.162

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

! Doctor found issues in 1 category.

Flutter version

3.38.2

Operating System, Device-specific and/or Tool

Tested only on android with API 31 and 33

Plugin version

6.1.5

Additional information

Video

https://drive.google.com/file/d/14jpKjYRIQJhEYnmS48ABjNRQ7kK37v7E/view?usp=drive_link
https://drive.google.com/file/d/16klIEypDtQYAtXmd-NiYhfeLhRJ5Gjvq/view?usp=drive_link

Flutter issue

flutter/flutter#178852

Self grab

  • I'm ready to work on this issue!

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions