Native player flicker when using certain widgets

[HedgeHao]

Describe the bug When using Native Player on WIndows with some certain widgets. The player keeps flicker.

When using both widget 1 and 2. The flicker happened. https://user-images.githubusercontent.com/8536950/177518800-beae3297-1666-443a-8a49-d2de8381022b.mp4

When comment out widget 1. The video is playing fine. https://user-images.githubusercontent.com/8536950/177518403-847e7e56-c48c-4544-aeb3-c451ca76148f.mp4

Media Media is download from here

Minimal reproducible code

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

Player player = Player(id: 0, videoDimensions: const VideoDimensions(320, 180), registerTexture: false);

void main() async {
  await DartVLC.initialize(useFlutterNativeView: true);
  runApp(const MyApp());

  player.open(Media.asset('C:/sample.mp4'), autoStart: true);
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text("Dart VLC BUG"),
          ),
          body: Center(
              child: Column(
            children: [
              // Widget 1
              SizedBox(
                  height: 300,
                  child: GridView.count(
                      crossAxisCount: 3,
                      children: List.generate(
                        10,
                        (index) => Text(index.toString()),
                      ))),

              // Widget 2
              Container(
                decoration: const ShapeDecoration(shape: CircleBorder(), color: Color(0xFFFFA621)),
                width: 65,
                height: 65,
              ),

              // Player
              NativeVideo(
                player: player,
                width: 320,
                height: 180,
                volumeThumbColor: Colors.blue,
                volumeActiveColor: Colors.blue,
                showControls: true,
              )
            ],
          )),
        ));
  }
}

Flutter logs

flutter doctor -v
[√] Flutter (Channel master, 3.1.0-0.0.pre.1506, on Microsoft Windows [Version 10.0.19043.1645], locale en-US)
• Flutter version 3.1.0-0.0.pre.1506 on channel master at D:\bin\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4b5be42f2d (11 hours ago), 2022-07-05 18:39:08-0400                               
• Engine revision ed6adf55e0                                                                           
• Dart version 2.18.0 (build 2.18.0-256.0.dev)                                                         
• DevTools version 2.15.0

[√] Chrome - develop for the web                                                                       
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.10)                                                                                             
• Visual Studio at D:\Program Files (x86)\Microsoft Visual Studio\2019\Community                       
• Visual Studio Community 2019 version 16.11.32126.315                                                 
• Windows 10 SDK version 10.0.19041.0

[√] Connected device (2 available)                                                                     
• Windows (desktop) • windows • windows-x64    
• Microsoft Windows [Version 0.0.19043.1645]                                                                           
• Chrome (web)      
• chrome  
• web-javascript 
• Google Chrome 102.0.5005.115

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

Operating system: Windows 10 Pro, 21H1, 19043.1645

Other details:

• [x] I confirm this is not a bug in the VLC app & only dart_vlc.
• [ ] I have donated / sponsored dart_vlc.

[alexmercerind]

That's odd. I thought this was fixed after Flutter 3.0.0.

[HedgeHao]

Seems like ShapeDecoration is interfering. When I change ShapeDecoration to BoxDecoration, the flicker goes away.

[alexmercerind]

Hi @HedgeHao, I have decided to remove NativeVideo widget for now in the latest version v0.4.0. Since it is no more, this is no longer a concern. Below I have discussed the future plans:

First of all, sorry for being inactive. I've been occupied with my exams & college. Maintaining open-source packages requires consistent work & time out of daily life. Writing C++ & native code is even more tedious.

There are a number of issues with this package, both in regard of performance & stability which I would like to fix. I'm not quite satisfied with the current state of the package, though I believe it is still usable. Hardware acceleration is a big concern. Currently, a substantial amount of load is caused on the CPU when using package:dart_vlc. This is because every video frame is copied from GPU to RAM buffer (which is a CPU process & CPU isn't made for rendering) for drawing it into Flutter's texture widget, both due to Flutter & libvlc's limitations at that time.

I made NativeVideo widget for bringing hardware-acceleration but as it turns out, it is not exactly good & stable alternative i.e. it uses undocumented API from Windows, has other issues while rendering inside widget tree (like you shared). It simply worked by creating another window under actual Flutter window & making a section of Flutter app transparent to display video through it. Thus, a hacky solution.

Now, my work is sponsored by Stream. I can now proceed my work with peace & build the best-ever performant & stable video library for Flutter Desktop. I attempted to render using OpenGL the other day: flutter-windows-ANGLE-OpenGL-Direct3D-Interop. I will continue this work.

Thanks!