Flutter PageView widget flickers when use with Texture widget when scrolling on Android

[chandarlee]

Steps to reproduce

I have a simple PageView widget which has two item(two page). First page is a big video player view playing a butterfly. Second page is a GridView widget which has four items and its second item is a small video player view playing an another video;

I start scroll pageview from first page to second page, and when the small video player view of second page firstly becomes visible , the screen flickers. After screen capture, I found the flicker: The small video player view's video content appears on the big video player view;

I run the same code on iOS, everything works fine, the flicker does not happen.

Expected results

switch between pages should not flicker.

Actual results

Flicker happens when scroll to second page

Code sample

Code sample

```dart import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title), ), body: Center( child: PageView.builder( itemCount: 2, itemBuilder: (context, index) { return index == 0 ? const VideoPlayerItem('assets/Butterfly-209.mp4') : GridView.builder( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: 9 / 16, crossAxisSpacing: 2.0, mainAxisSpacing: 2.0, ), itemCount: 4, itemBuilder: (BuildContext context, int index) { return [ Container(color: Colors.teal[400]), const VideoPlayerItem('assets/hdr10-720p.mp4'), Container(color: Colors.teal[500]), Container(color: Colors.teal[600]), ][index]; }, ); }, ), ), ); } } class VideoPlayerItem extends StatefulWidget { final String asset; const VideoPlayerItem(this.asset, {super.key}); @override _VideoPlayerItemState createState() => _VideoPlayerItemState(); } class _VideoPlayerItemState extends State { late VideoPlayerController _controller; var _inited = false; @override void initState() { super.initState(); _controller = VideoPlayerController.asset(widget.asset) ..initialize() ..setLooping(true).then((_) { // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed. setState(() { _inited = true; }); _controller.play(); }); } @override Widget build(BuildContext context) { return _inited ? VideoPlayer(_controller) : Container(color: Colors.black); } @override void dispose() { super.dispose(); _controller.dispose(); } } ```

Screenshots or Video

SVID_20240304_172349_1.mp4.zip

Logs

Logs

```console [Paste your logs here] ```

Flutter Doctor output

[✓] Flutter (Channel stable, 3.16.8, on macOS 14.3.1 23D60 darwin-arm64, locale zh-Hans-CN) • Flutter version 3.16.8 on channel stable at /Users/chandarlee/develop/flutter_sdk • Upstream repository https://github.com/flutter/flutter.git • Framework revision 67457e669f (7 weeks ago), 2024-01-16 16:22:29 -0800 • Engine revision 6e2ea58a5c • Dart version 3.2.5 • DevTools version 2.28.5

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/chandarlee/develop/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted.

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

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

[✓] Android Studio (version 2023.1) • Android Studio at /Applications/Android Studio.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.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Community Edition (version 2023.3.4) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 78.1.1 • Dart plugin version 233.13763.5

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

[✓] Connected device (5 available) • PCLM50 (mobile) • 35d6b38d • android-arm64 • Android 12 (API 31) • TAS AL00 (mobile) • 88Y0219C04005145 • android-arm64 • Android 12 (API 31) • 00008030 (mobile) • 00008020-00091C5C26D2002E • ios • iOS 17.3.1 21D61 • macOS (desktop) • macos • darwin-arm64 • macOS 14.3.1 23D60 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.94 ! Error: Browsing on the local area network for 韦良的iPhone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27)

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

• No issues found!

[huycozy]

Thanks for the report. I can reproduce this issue with a pure PlatformView example (without VideoPlayer package): pageview_flicker_144532

https://github.com/flutter/flutter/assets/104349824/c9f003df-b10b-49a4-b5fd-e6f4615dcc99

The issue seems to happen less in pure PlatformView example. I only see it if I quickly swipe from page 2 to page 1.

Additional info

• The issue occurs in both HybridComposition and VirtualDisplay modes.
• May be related to https://github.com/flutter/flutter/issues/135531 as well (the case is not the same).

flutter doctor -v (stable and master)

```bash [✓] Flutter (Channel stable, 3.19.2, on macOS 14.1 23B74 darwin-x64, locale en-VN) • Flutter version 3.19.2 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 7482962148 (5 days ago), 2024-02-27 16:51:22 -0500 • Engine revision 04817c99c9 • Dart version 3.3.0 • DevTools version 2.31.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • 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.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15C500b • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.2) • Android Studio at /Applications/Android Studio.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 • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) [✓] VS Code (version 1.87.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.84.0 [✓] Connected device (3 available) • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 11 (API 30) • macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.94 [✓] Network resources • All expected network resources are available. • No issues found! ``` ```bash [!] Flutter (Channel master, 3.20.0-16.0.pre.57, on macOS 14.1 23B74 darwin-x64, locale en-VN) • Flutter version 3.20.0-16.0.pre.57 on channel master at /Users/huynq/Documents/GitHub/flutter_master ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision dab0d18933 (5 hours ago), 2024-03-03 16:49:24 -0500 • Engine revision 024ea680ce • Dart version 3.4.0 (build 3.4.0-190.0.dev) • DevTools version 2.33.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 34.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • 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.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15C500b • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.2) • Android Studio at /Applications/Android Studio.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 • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) [✓] VS Code (version 1.87.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.84.0 [✓] Connected device (3 available) • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 11 (API 30) • macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.94 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```

[utkarshgupta2009]

Did you found out the solution? I am having the same problem?

[chandarlee]

Did you found out the solution? I am having the same problem?

Not yet

[reidbaker]

Note from triage: It appears that the video shows the new content in the old location.

[jyuno426]

• It seems to be the same issue as https://github.com/flutter/flutter/issues/142061

[joechan-cq]

I'm facing the same issue. It's a quite annoying issue. I use Texture widget to show image which loaded by native.

Flutter SDK 3.16.5

https://github.com/flutter/flutter/assets/9456005/d9fbfd4a-b005-444c-b940-dc88c3e2c9a3

[Athvaith2828]

Did any one find solution ? , i am also facing the same issus, i am rendering video using texture widget in linux, and the side by side using grid to display some tables, while the video renders properly, the grid flickers.

[flutter-triage-bot[bot]]

This issue is assigned to @johnmccutchan but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

[Henriquek47]

Any updates?

[JiyadAhammad]

Any Updated ??

[jonahwilliams]

I don't understand the reported issue. @huycozy what should I be looking for in this video? What is going wrong here?

[huycozy]

@jonahwilliams At my comment above with the demo video, please notice timestamp at 0:09 or 0:17, you may see the red color (from platformview) flicker when swiping. I think video with video_player will be clearer so I re-attach it here as well:

Demo video (OP provided)

https://github.com/user-attachments/assets/05fee4aa-0e21-4172-94a0-7cfd5142c3a3

[jonahwilliams]

Got it. Looks like the textures are getting mixed up?

[huycozy]

yes, this frame shows the issue. I will capture the better demo visual next time:)

[jonahwilliams]

no worries, its just my tired eyes 😄