Support inlining Android/iOS views

[amirh]

A generic solution for embedding any Android/iOS view as part of the Flutter widget hierarchy would enable some highly desired features including Google Maps (#73) and WebView (#730).

[rolurq]

Also on this matter, this would be useful when embedding camera stream in an application.

[rolurq]

Also on this matter, this would be useful when embedding camera stream in an application.

[amirh]

For a camera stream you probably want to use a Texture widget directly.
The camera plugin is doing that for the device's cameras: https://pub.dartlang.org/packages/camera

[amirh]

For a camera stream you probably want to use a Texture widget directly.
The camera plugin is doing that for the device's cameras: https://pub.dartlang.org/packages/camera

[benbucksch]

Do you guys need help here, in development?

[benbucksch]

Do you guys need help here, in development?

[amirh]

@benbucksch contributions are welcomed, here are 2 issues you can look at: #19417 #19418.

Thanks!

[amirh]

@benbucksch contributions are welcomed, here are 2 issues you can look at: #19417 #19418.

Thanks!

[yohom]

So far I've only found AndroidView, is there an IOSView? Thanks. @amirh

[yohom]

So far I've only found AndroidView, is there an IOSView? Thanks. @amirh

[amirh]

@yohom this is still work in progress, I started with the Android support.
I wouldn't even use AndroidView yet as it is incomplete and unstable.

[amirh]

@yohom this is still work in progress, I started with the Android support.
I wouldn't even use AndroidView yet as it is incomplete and unstable.

[morad00]

Looks good! hope much support from flutter team

[morad00]

Looks good! hope much support from flutter team

[newbie-gk]

Would absolutely love this feature :)
Any plans on when will this be available?

[newbie-gk]

Would absolutely love this feature :)
Any plans on when will this be available?

[tiagofalves]

Hi @amirh, first of all, a big thank you. If you need help with testing the features i can help.

[tiagofalves]

Hi @amirh, first of all, a big thank you. If you need help with testing the features i can help.

[amirh]

Basic support for embedding Android views has landed in master, the API shouldn't be considered stable yet.
There are still open issues, notably no keyboard support(#19718).

Note that Flutter widgets should be preferred over embedded Android views when possible.

[amirh]

Basic support for embedding Android views has landed in master, the API shouldn't be considered stable yet.
There are still open issues, notably no keyboard support(#19718).

Note that Flutter widgets should be preferred over embedded Android views when possible.

[levrik]

@amirh Where can I find documentation? I would like to play with it a bit.

[levrik]

@amirh Where can I find documentation? I would like to play with it a bit.

[amirh]

Dartdoc for master is here: https://master-docs-flutter-io.firebaseapp.com/flutter/widgets/AndroidView-class.html

[amirh]

Dartdoc for master is here: https://master-docs-flutter-io.firebaseapp.com/flutter/widgets/AndroidView-class.html

[rolurq]

@amirh Any report on iOS progress will be great

[rolurq]

@amirh Any report on iOS progress will be great

[amirh]

We're working on it, don't have any time estimates...

[amirh]

We're working on it, don't have any time estimates...

[tiagofalves]

@amirh Any instructions on how to use this to actually display the inline map?

[tiagofalves]

@amirh Any instructions on how to use this to actually display the inline map?

[amirh]

There's a PR up for review (flutter/plugins#743) that ports google_maps_flutter to use an embedded Android view.

All of this is very experimental at this stage.

[amirh]

There's a PR up for review (flutter/plugins#743) that ports google_maps_flutter to use an embedded Android view.

All of this is very experimental at this stage.

[yohom]

How to respond to events at the dart end, for example, with the zoom in and zoom out buttons in a MapView? I tried AndroidView with some MapView(native view) and it looks like a static image right now, unable to respond to native view events. @amirh

[yohom]

How to respond to events at the dart end, for example, with the zoom in and zoom out buttons in a MapView? I tried AndroidView with some MapView(native view) and it looks like a static image right now, unable to respond to native view events. @amirh

[amirh]

Communication with the dart code can be done over method channels or message channels. You can check flutter/plugins#743 for an example.

[amirh]

Communication with the dart code can be done over method channels or message channels. You can check flutter/plugins#743 for an example.

[kbz066]

To what extent? @amirh

[kbz066]

To what extent? @amirh

[amirh]

I'm not sure I understand your question...

…

On Thu, Aug 30, 2018, 8:57 PM kbz066 ***@***.***> wrote: To what extent? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19030 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA-gdThzP-Vpuva3eQREBG4Ny6hv8eMEks5uWLRAgaJpZM4VAOac> .

[amirh]

I'm not sure I understand your question...

…

On Thu, Aug 30, 2018, 8:57 PM kbz066 ***@***.***> wrote: To what extent? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19030 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA-gdThzP-Vpuva3eQREBG4Ny6hv8eMEks5uWLRAgaJpZM4VAOac> .

[felangel]

For anyone who is looking for a simple example, I wrote a short article on how to use AndroidView at https://medium.com/@felangelov/flutter-platformview-how-to-create-flutter-widgets-from-native-views-366e378115b6

[felangel]

For anyone who is looking for a simple example, I wrote a short article on how to use AndroidView at https://medium.com/@felangelov/flutter-platformview-how-to-create-flutter-widgets-from-native-views-366e378115b6

[romatroskin]

really waiting for this feature to inline YouTube player :)

[romatroskin]

really waiting for this feature to inline YouTube player :)

[cosminstoinescu]

I want to use the inline map on an Android device(Samsung S4). Because my Google Play service is not up to date, on the screen appeared the Update button. When clicking it the following error is thrown:

W/GooglePlayServicesUtil( 8663): Google Play services out of date. Requires 12451000 but found 11975238
D/ViewRootImpl( 8663): ViewPostImeInputStage ACTION_DOWN
D/AndroidRuntime( 8663): Shutting down VM
E/AndroidRuntime( 8663): FATAL EXCEPTION: main
E/AndroidRuntime( 8663): android.util.AndroidRuntimeException: Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK flag. Is this really what you want?
E/AndroidRuntime( 8663): at android.app.ContextImpl.startActivity(ContextImpl.java:1610)
E/AndroidRuntime( 8663): at android.app.ContextImpl.startActivity(ContextImpl.java:1597)
E/AndroidRuntime( 8663): at android.content.ContextWrapper.startActivity(ContextWrapper.java:337)
E/AndroidRuntime( 8663): at android.content.ContextWrapper.startActivity(ContextWrapper.java:337)
E/AndroidRuntime( 8663): at com.google.android.gms.dynamic.zze.onClick(Unknown Source)
E/AndroidRuntime( 8663): at android.view.View.performClick(View.java:5197)
E/AndroidRuntime( 8663): at android.view.View$PerformClick.run(View.java:20926)
E/AndroidRuntime( 8663): at android.os.Handler.handleCallback(Handler.java:739)
E/AndroidRuntime( 8663): at android.os.Handler.dispatchMessage(Handler.java:95)
E/AndroidRuntime( 8663): at android.os.Looper.loop(Looper.java:145)
E/AndroidRuntime( 8663): at android.app.ActivityThread.main(ActivityThread.java:5951)
E/AndroidRuntime( 8663): at java.lang.reflect.Method.invoke(Native Method)
E/AndroidRuntime( 8663): at java.lang.reflect.Method.invoke(Method.java:372)
E/AndroidRuntime( 8663): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1388)
E/AndroidRuntime( 8663): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1183)

[cosminstoinescu]

I want to use the inline map on an Android device(Samsung S4). Because my Google Play service is not up to date, on the screen appeared the Update button. When clicking it the following error is thrown:

W/GooglePlayServicesUtil( 8663): Google Play services out of date. Requires 12451000 but found 11975238
D/ViewRootImpl( 8663): ViewPostImeInputStage ACTION_DOWN
D/AndroidRuntime( 8663): Shutting down VM
E/AndroidRuntime( 8663): FATAL EXCEPTION: main
E/AndroidRuntime( 8663): android.util.AndroidRuntimeException: Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK flag. Is this really what you want?
E/AndroidRuntime( 8663): at android.app.ContextImpl.startActivity(ContextImpl.java:1610)
E/AndroidRuntime( 8663): at android.app.ContextImpl.startActivity(ContextImpl.java:1597)
E/AndroidRuntime( 8663): at android.content.ContextWrapper.startActivity(ContextWrapper.java:337)
E/AndroidRuntime( 8663): at android.content.ContextWrapper.startActivity(ContextWrapper.java:337)
E/AndroidRuntime( 8663): at com.google.android.gms.dynamic.zze.onClick(Unknown Source)
E/AndroidRuntime( 8663): at android.view.View.performClick(View.java:5197)
E/AndroidRuntime( 8663): at android.view.View$PerformClick.run(View.java:20926)
E/AndroidRuntime( 8663): at android.os.Handler.handleCallback(Handler.java:739)
E/AndroidRuntime( 8663): at android.os.Handler.dispatchMessage(Handler.java:95)
E/AndroidRuntime( 8663): at android.os.Looper.loop(Looper.java:145)
E/AndroidRuntime( 8663): at android.app.ActivityThread.main(ActivityThread.java:5951)
E/AndroidRuntime( 8663): at java.lang.reflect.Method.invoke(Native Method)
E/AndroidRuntime( 8663): at java.lang.reflect.Method.invoke(Method.java:372)
E/AndroidRuntime( 8663): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1388)
E/AndroidRuntime( 8663): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1183)

[v7lin]

I don't think this is a good solution.If you open 10 WebView, the memory will reach 1Gb.

[v7lin]

I don't think this is a good solution.If you open 10 WebView, the memory will reach 1Gb.

[benbucksch]

@v7lin : If you know a better solution, please feel free to go ahead, file a new ticket, describe it there, and implement it yourself.

I think amirh deserves a lot of thanks for implementing this at all. And even for free.

[benbucksch]

@v7lin : If you know a better solution, please feel free to go ahead, file a new ticket, describe it there, and implement it yourself.

I think amirh deserves a lot of thanks for implementing this at all. And even for free.

[v7lin]

@benbucksch Sorry! I'not good at english.
对于上述评论，我表示歉意，我并无指责之意，那是我用了翻译工具翻译的英文。事实上，我也一直在研究如何在Flutter里内联WebView，一个多月的时间内，尝试了很多方案，然而却无法解决WebView内存消耗问题。而且我很佩服 @amirh ，他居然能想到用 Presentation 和 Texture 解决视图内联功能。

translate.google.com

I apologize for the above comments. I have no blame. It is English that I translated using translation tools. In fact, I have been researching how to inline WebView in Flutter. I have tried many solutions in a month, but I can't solve the WebView memory consumption problem. And I admire @amirh, he can actually think of using the Presentation and Texture to solve the view inline function.

[v7lin]

@benbucksch Sorry! I'not good at english.
对于上述评论，我表示歉意，我并无指责之意，那是我用了翻译工具翻译的英文。事实上，我也一直在研究如何在Flutter里内联WebView，一个多月的时间内，尝试了很多方案，然而却无法解决WebView内存消耗问题。而且我很佩服 @amirh ，他居然能想到用 Presentation 和 Texture 解决视图内联功能。

translate.google.com

I apologize for the above comments. I have no blame. It is English that I translated using translation tools. In fact, I have been researching how to inline WebView in Flutter. I have tried many solutions in a month, but I can't solve the WebView memory consumption problem. And I admire @amirh, he can actually think of using the Presentation and Texture to solve the view inline function.

[benbucksch]

@v7lin: Thanks :)

[benbucksch]

@v7lin: Thanks :)

[JTorrus]

Is there any progress with Google Maps on iOs?

[JTorrus]

Is there any progress with Google Maps on iOs?

[behinenet]

We all need Google Maps on iOs too, please consider

[behinenet]

We all need Google Maps on iOs too, please consider

[phuongdt8x]

Thank for bring Google Map inline on Android. I'm waiting on iOS too for production application. Right now I still use old version of library to run-able Google Map on iOS, however it will be develop on two different branches. So is there any progress would be so great.

[phuongdt8x]

Thank for bring Google Map inline on Android. I'm waiting on iOS too for production application. Right now I still use old version of library to run-able Google Map on iOS, however it will be develop on two different branches. So is there any progress would be so great.

[JTorrus]

I'm in a similar situation, I'm working on an app and it needs to display a Google Map on both platforms. I had to change a bit the structure and use another Maps library to make it work on iOs. I hope we have good news soon because I don't like the idea of using different libraries to accomplish this functionality.

[JTorrus]

I'm in a similar situation, I'm working on an app and it needs to display a Google Map on both platforms. I had to change a bit the structure and use another Maps library to make it work on iOs. I hope we have good news soon because I don't like the idea of using different libraries to accomplish this functionality.

[Conghdos]

Tôi đang ở trong tình huống tương tự, tôi đang làm việc trên một ứng dụng và nó cần hiển thị Google Map trên cả hai nền tảng. Tôi đã phải thay đổi một chút cấu trúc và sử dụng một thư viện Maps khác để làm cho nó hoạt động trên iOs. Tôi hy vọng chúng tôi có tin tốt sớm vì tôi không thích ý tưởng sử dụng các thư viện khác nhau để thực hiện chức năng này.

@JTorrus
I also have the same problem as you.
Can you tell me the solution on your IOS?
Thank you!

[Conghdos]

Tôi đang ở trong tình huống tương tự, tôi đang làm việc trên một ứng dụng và nó cần hiển thị Google Map trên cả hai nền tảng. Tôi đã phải thay đổi một chút cấu trúc và sử dụng một thư viện Maps khác để làm cho nó hoạt động trên iOs. Tôi hy vọng chúng tôi có tin tốt sớm vì tôi không thích ý tưởng sử dụng các thư viện khác nhau để thực hiện chức năng này.

@JTorrus
I also have the same problem as you.
Can you tell me the solution on your IOS?
Thank you!

[JTorrus]

Tôi đang ở trong tình huống tương tự, tôi đang làm việc trên một ứng dụng và nó cần hiển thị Google Map trên cả hai nền tảng. Tôi đã phải thay đổi một chút cấu trúc và sử dụng một thư viện Maps khác để làm cho nó hoạt động trên iOs. Tôi hy vọng chúng tôi có tin tốt sớm vì tôi không thích ý tưởng sử dụng các thư viện khác nhau để thực hiện chức năng này.

@JTorrus
I also have the same problem as you.
Can you tell me the solution on your IOS?
Thank you!

My app has a TabBar with two pages: One displays the Google Map and the other one displays a ListView. Google Maps for Flutter supports the Widget hierarchy so you can put it inside a Scaffold or whatever Widget you want.

For iOs I had to use Map_View, works Ok but does not respect the Widget hierarchy of Flutter. You have to call a function for displaying the map when an event happens (e.g. onTap parameter in a button). Then my decision was to delete the TabBar and show just a ListView with a FloatingActionButton that displays the map in fullscreen when pressed.

[JTorrus]

Tôi đang ở trong tình huống tương tự, tôi đang làm việc trên một ứng dụng và nó cần hiển thị Google Map trên cả hai nền tảng. Tôi đã phải thay đổi một chút cấu trúc và sử dụng một thư viện Maps khác để làm cho nó hoạt động trên iOs. Tôi hy vọng chúng tôi có tin tốt sớm vì tôi không thích ý tưởng sử dụng các thư viện khác nhau để thực hiện chức năng này.

@JTorrus
I also have the same problem as you.
Can you tell me the solution on your IOS?
Thank you!

My app has a TabBar with two pages: One displays the Google Map and the other one displays a ListView. Google Maps for Flutter supports the Widget hierarchy so you can put it inside a Scaffold or whatever Widget you want.

For iOs I had to use Map_View, works Ok but does not respect the Widget hierarchy of Flutter. You have to call a function for displaying the map when an event happens (e.g. onTap parameter in a button). Then my decision was to delete the TabBar and show just a ListView with a FloatingActionButton that displays the map in fullscreen when pressed.