Reduce friction encountered when adding Flutter to existing apps

[mit-mit]

Flutter's templates, tooling, and runtime are currently primarily optimized for the use case of creating a new mobile application from scratch. However, several developers have expressed an interest in making it easier to add one or more Flutter "screens" to existing Android and iOS apps.

The present bug tracks reduction of general friction developers encounter when trying to accomplish this integration of Flutter into existing apps.

The detailed work for this effort is tracked in a number of more detailed issues:
https://github.com/flutter/flutter/issues?q=is%3Aopen+is%3Aissue+label%3A%22a%3A+existing-apps%22

The initial documentation for the preview support is available on our Wiki:
https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

[packouray]

Hello,

Any news about the documentation explaining how to embed flutter views in native apps ?

Thank you very much.

[mit-mit]

Sorry, no, not yet

[VincentH-Net]

@mit-mit My scenario is a variation of the above, aimed at enterprise apps that use .NET (Core): I would like to evaluate whether Flutter can be combined with 'classic' Xamarin.iOS and Xamarin.Android.

Flutter would be used for the UI layer (screens including image resources + navigation); Xamarin for logic, models and services. This could be a more productive alternative to Xamarin Forms.

This should be possible; Flutter can be embedded as a native iOS/Android component and Xamarin can interop with such components through bindings.
In the other direction, Xamarin code can be wrapped as native iOS/Android components with .NET Embedding, and Flutter can interop with such components.

Would the Flutter team consider this use case relevant?
If so, are there contact options to get info on Flutter embedding and interop until the documents are here?

In case anyone would like to give feedback (much appreciated!), this is my idea:

Create a single UI component in Flutter, containing all screens, static image resources, navigation and design data for an app. This component is developed and tested with high productivity in standard Flutter toolchain; and then embedded in the Xamarin apps. The complete app build & publishing would be with Xamarin toolchain.

[passsy]

@VincentH-Net Please file a extra ticket for Xamarin interop. This issue is about integrating Flutter in an native iOS/Android app.
If you want to interact with your C# core, better checkout this issue.

[VincentH-Net]

@passsy thx, I created a new issue #15200

I would need more than interacting with C# core logic; e.g. access native device services, .NET Core NuGet libraries. Basically only the views would be Flutter.

[packouray]

Hello @mit-mit , @passsy ,

I would like to know how to embed Flutter into a native Android project. Do I have to create a Flutter project within the Android project folder and then bind everything ? Or do I have to create a Flutter project, change the android folder with my Android project folder and then bind everything ?

Thank you

[matejthetree]

goes as well for adding flutter lib project to existing flutter app

[specneeo]

#15556 I hava an app which most pages written by native code. Now I want to integrate flutter, in order to write new pages. I have read flutter doc, for example:
Android

public class MainActivity extends FlutterActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    GeneratedPluginRegistrant.registerWith(this);
  }
}

this activity run with main.dart automatically.
But if I have mainA.dart and mainB.dart, how to assign mainA.dart to AActivity, assign mainB.dart to BActivity. Or how to specify which dart file to load?

many thanks.

[packouray]

I think you should in your native side keep only one FlutterActivity and send for example a string that correspond to the name of the view that you want to display to your main.dart using the channel.

In the flutter side I think you should implement Routes first and then get the string and use a switch to push the view that corresponds to the string.

[brholmes]

I have been implementing flutter into my existing android project and am having an issue with FlutterActivity crashing in onCreate.

E/AndroidRuntime: FATAL EXCEPTION: main
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.topsection.FlutterActivityCx}: java.lang.RuntimeException: java.lang.NullPointerException: Attempt to invoke virtual method 'void io.flutter.view.ResourceExtractor.waitForCompletion()' on a null object reference
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2927)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2988)
at android.app.ActivityThread.-wrap14(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1631)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6682)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1520)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1410)
Caused by: java.lang.RuntimeException: java.lang.NullPointerException: Attempt to invoke virtual method 'void io.flutter.view.ResourceExtractor.waitForCompletion()' on a null object reference
at io.flutter.view.FlutterMain.ensureInitializationComplete(FlutterMain.java:212)
at io.flutter.app.FlutterActivityDelegate.onCreate(FlutterActivityDelegate.java:150)
at io.flutter.app.FlutterActivity.onCreate(FlutterActivity.java:81)
at com.topsection.FlutterActivityCx.onCreate(FlutterActivityCx.java:21)

This seems similar if not the same to #14423 but I was unsure on the fix. Any help would be greatly appreciated.

[bravekingzhang]

Could you provide us a plug-in on android studio, to let us simply integration flutter into exist android project. @mit-mit

[FredvanRijswijk]

Still there is no explanation how to integrate in an existing iOS or Android project...

Do you need a new Flutter project and move existing iOS project swift files into the iOS folder and build from Flutter?

We have a big app and want to start with Flutter in that existing app or the best solution is to start over and create a brand new version 100% Flutter project

[tomaszpolanski]

I have a similar case as @FredvanRijswijk. With a large project with multiple contributors, it is a big hassle to change the project structure.

Is there a possibility to specify somewhere (e.g. pubspec.yaml) the paths to iOS and Android projects?

Currently, the alternative is (at least for Android) to move all the files to android subfolder and rename the project - that creates inconvenience with git.

[mravn-google]

We are currently experimenting with approaches that would invert that dependency, so that your existing project would include the Flutter project in some form (say, as an Android Activity). We're writing up our experiments and findings as we go along. I'll provide a link here once we have a draft wiki page.

[FredvanRijswijk]

@mravn-google Nice

[mravn-google]

https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

[mravn-google]

/cc @floitschG

[tomaszpolanski]

Thanks @mravn-google. I've already tried to integrate your solution (with small modifications, had to add FlutterMain.startInitialization) into my legacy Android app, and it works nicely.

[shivam340]

I am trying to integrate flutter module inside existing iOS and Android app. For the Android, it is working fine. I am following steps from https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps. But for iOS app When I try to push FlutterViewController I get the following error.

Logs

[VERBOSE-2:engine.cc(112)] Engine run configuration was invalid.
[VERBOSE-2:FlutterViewController.mm(411)] FlutterViewController.mm(411)] Could not launch engine with configuration.

Following is the code that I am using to push flutter view controller

@IBAction func onClickButton(_ sender: Any) {
        print("Tapped on Button");
        let flutterViewController = FlutterViewController()
        navigationController?.pushViewController(flutterViewController, animated: false)
    }

an output of running flutter doctor -v

[✓] Flutter (Channel master, v0.5.9-pre.79, on Mac OS X 10.13.6 17G65, locale en-IN)
    • Flutter version 0.5.9-pre.79 at /Users/shivamgosavi/flutter
    • Framework revision 3a4ae280e3 (5 hours ago), 2018-08-17 15:02:39 -0700
    • Engine revision 4ee648914f
    • Dart version 2.1.0-dev.0.0.flutter-be6309690f

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.2)
    • Android SDK at /Users/shivamgosavi/Library/Android/sdk
    • Android NDK at /Users/shivamgosavi/Library/Android/sdk/ndk-bundle
    • Platform android-28, build-tools 28.0.2
    • ANDROID_HOME = /Users/shivamgosavi/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.4.1, Build version 9F2000
    • ios-deploy 1.9.2
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 26.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[✓] IntelliJ IDEA Community Edition (version 2017.2.6)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 21.2.2
    • Dart plugin version 172.4343.25

[✓] Connected devices (1 available)
    • iPhone 8 Plus • 0822DE18-6632-4F22-93F3-46770C82A247 • ios • iOS 11.4 (simulator)

• No issues found!

Please let me know If I am missing anything. And also please update the doc for integrating flutter into existing swift app, currently, the doc is only about ObjectiveC.

I have also created an issue for this #20777 .

[matthew-carroll]

I'm going to close this ticket because it doesn't have a clear delivery artifact.

For bugs and feature requests related to adding Flutter to an existing Android or iOS app, please file bugs against the following project:
https://github.com/flutter/flutter/projects/28

Also, if any comments in this thread require their own issues, please file those against the above project as well.

[Wanghuayin]

@tomaszpolanski could you share the experience for how to uses the "Flutter driver" to test the hybrid app?

[tomaszpolanski]

@Wanghuayin I don't want to spam this issue. Just find me on twitter and I will be happy to share

[HairLee]

Hello,

Can I use google map in IOS?

Now I just can be able to use it on Android App

[walterFeng]

@matthew-carroll
I am embedding Flutter into an existing project. I know how to use initialRoute to navigate to the specified Flutter page, but how do I put parameters or set arguments to this Flutter page?

For example, the goods list of the native page jumps to the goods details of Flutter, and the goodsID is the parameter that the page needs to load the data. Unfortunately, the Flutter page does not have this parameter when it is render. Should I wait for a channelMessage (include a goodsID) from my native page? This seems unreasonable

Can can help me？

[jonasbark]

@walterFeng you could just add the Id in the route name, just like a get parameter in a URL? E.g. "/goods/(Id)" or "/goods?id=(id)".

[walterFeng]

@jonasbark It works for me, thank you

[pejalo]

Add Flutter to existing apps is an awesome resource. When invoking Flutter from within iOS/Android, what is the best way to send data to the Flutter world and then get something back once the Flutter view is dismissed? I don't see any arguments or return values to/from Flutter.createView or FlutterViewController.

Writing custom platform-specific code would do it, but that seems relatively cumbersome. We would have to write a bunch of asynchronous messages between the two worlds, including verifications that the data is ready for the Flutter or native views before they're shown.

[matthew-carroll]

@pejalo would you mind filing a dedicated ticket for your use-case? Then we can address your use-case, specifically. In that ticket, please provide any surrounding details about why you need those particular signals so that we can factor that information into any API changes.

[pejalo]

@matthew-carroll thanks for your response! I just created this ticket: #24080

[jelenalecic]

@jonasbark It works for me, thank you

can you provide whole example, please? :)

[neiljaywarner]

hi, i tried to let my android project depends on my flutter android module, and i did step by step as
[Add Flutter to existing apps]{https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps}
but after that and i run my application it crashes with this error:

    java.lang.UnsatisfiedLinkError: dalvik.system.PathClassLoader[DexPathList[[zip file "/data/app/*-cghZarZN7mfe_qjTTemg1Q==/base.apk", zip file "/data/user/0/*/files/hydra/flutter/unspecified/bundle.zip"],nativeLibraryDirectories=[/data/app/*-cghZarZN7mfe_qjTTemg1Q==/lib/arm, /data/app/*-cghZarZN7mfe_qjTTemg1Q==/base.apk!/lib/armeabi, /system/lib, /vendor/lib]]] couldn't find "libflutter.so"

look forward to get help...

** Resolved by add **

ndk {
            abiFilters 'armeabi-v7a'
        }

** to host project's build.gradle

found after flutter android module is compiled，the “libflutter.so” is located in "jni/armeabi-v7a/libflutter.so" **

Is there a way to get it to work with 'normal' emulator as well, or do you have to use the slow emulators?

tanks

[neiljaywarner]

@walterFeng you could just add the Id in the route name, just like a get parameter in a URL? E.g. "/goods/(Id)" or "/goods?id=(id)".

Does this work in iOS? It was not working for me...

[jitesh-sharma]

@jonasbark It works for me, thank you

hi @jonasbark could you please share the any code to implement it for iOS. I have no idea how to open different flutter pages with some parameter in existing iOS app. I can able to open flutter page, but donot know to open different pages on the basis of app requirements.

[jitesh-sharma]

Add Flutter to existing apps is an awesome resource. When invoking Flutter from within iOS/Android, what is the best way to send data to the Flutter world and then get something back once the Flutter view is dismissed? I don't see any arguments or return values to/from Flutter.createView or FlutterViewController.

Writing custom platform-specific code would do it, but that seems relatively cumbersome. We would have to write a bunch of asynchronous messages between the two worlds, including verifications that the data is ready for the Flutter or native views before they're shown.

Hi
Could you have any idea of it. or you got any solution for the same. I have also same issues in my existing app. So please share your experience if you have any solution.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.