How to make dart Widgets fully transparent to see platform native view under FlutterView?

Piasy Xu

unread,

Mar 13, 2018, 2:05:47 AM3/13/18

to Flutter Dev

I want to create a video chat app, using some platform native SDK like WebRTC to implement the video part, using flutter to implement other interactivity, how could I achieve that?

In Android, I try to hook the createFlutterView method, create a FrameLayout to hold the FlutterView and other native views under FlutterView, and make it as Activity's content view by setContentView.

FlutterView is a subclass of SurfaceView, so I can make it transparent like this:

flutterView.setZOrderOnTop(true);
flutterView.getHolder().setFormat(PixelFormat.TRANSPARENT);

To make FlutterView's surface background transparent, I declare android:colorBackground as #00000000 in my theme, according to FlutterView's source code.

With those setup, I can see the view under FlutterView for a short period, after that it's covered by Widgets declared in dart code. I think that short period is the dart code load time.

To verify that, I create a pure Android project with the same views as above, but without any dart code. In that project, views under FlutterView show well all the time.

So, my question is, how to make dart Widgets fully transparent to see platform native view under FlutterView?

Mikkel Ravn

unread,

Mar 13, 2018, 11:00:01 AM3/13/18

to Piasy Xu, Flutter Dev

You'd need to make changes to the Flutter engine to teach compositing code to respect "holes". An early prototype exists here:

https://github.com/mravn-google/engine/tree/inline_maps?files=1

The project was put on hold, because "hole widgets" are not generally composable with other widgets, and therefore at odds with a major tenet of Flutter.

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Piasy Xu

unread,

Mar 13, 2018, 7:23:11 PM3/13/18

to Flutter Dev

Thanks! I'll build this branch and try it.

在 2018年3月13日星期二 UTC+8下午11:00:01，Mikkel Ravn写道：

Piasy Xu

unread,

Mar 14, 2018, 9:02:25 AM3/14/18

to Flutter Dev

Hi Mikkel, I've built the engine of your branch, and replace the original flutter.jar in <flutter install dir>/bin/cache/artifacts/engine/android-arm and android-arm64, but when I launch the engine's hello_flutter example, nothing showed on screen, and I observed this error log:

03-14 20:46:44.178 25643-25668/io.flutter.examples.platform_view E/flutter: [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Wrong script snapshot version, expected '667a3bf9d477f047a8d88dddf6d8bfd1' found '9bc066b6e8ef5a9f7224c2926c6ad2f4'

03-14 20:46:44.178 25643-25668/io.flutter.examples.platform_view E/flutter: [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Dart_GetClosure expects argument 'library' to be non-null.

Output of flutter --version:

Flutter 0.1.5 • channel beta • https://github.com/flutter/flutter.git

Framework • revision 3ea4d06340 (3 weeks ago) • 2018-02-22 11:12:39 -0800

Engine • revision ead227f118

Tools • Dart 2.0.0-dev.28.0.flutter-0b4f01f759

Could you please help me? Thanks!

在 2018年3月13日星期二 UTC+8下午11:00:01，Mikkel Ravn写道：

You'd need to make changes to the Flutter engine to teach compositing code to respect "holes". An early prototype exists here:

Message has been deleted

Eric Seidel

unread,

Mar 23, 2018, 10:56:26 AM3/23/18

to Piasy Xu, Flutter Dev

I suspect this is the bug in question? https://github.com/flutter/flutter/issues/9627

--

Reply all

Reply to author

Forward