Add Flutter to Existing App

August 09, 2021 Publish By : EXPERT APP DEVS 4 min read Viewed By : 619
Add Flutter to Existing App

It’s now and again no longer realistic to rewrite your whole application in Flutter all at once. For these situations, Flutter may be integrated into your present application piecemeal, as a library or module. That module can then be imported into your Android or iOS (presently supported platforms) app to render part of your app’s UI in Flutter. Or, simply to run shared Dart logic.In some steps, you may carry the productivity and the expressiveness of Flutter into your personal app.

As of Flutter v1.12, add-to-app is supported for the fundamental scenario of integrating one full screen Flutter instance at a time with the app.

As of Flutter v1.26, add-to-app experimentally helps including more than one times of Flutter engines, screens, or views into your app. This can assist integration scenarios including a hybrid navigation stack with combined native and Flutter screens, or a page with more than one partial-screen Flutter views. Having more than one Flutter instance lets in every instance to keep an independent application and UI state while the use of minimum memory resources.

Add flutter module into android application

Flutter may be embedded into your current Android application piecemeal, as a source code Gradle subproject or as AARs.

The integration flow may be accomplished by the usage of the Android Studio IDE with the Flutter plugin or manually.

1) Using Android Studio IDE

The Android Studio IDE is a handy way of integrating your Flutter module automatically. With Android Studio, you can co-edit each Android code and your Flutter code in the identical project. You also can continue to use your regular IntelliJ Flutter plugin functionalities consisting of Dart code completion, hot reload, and widget inspector.

Add-to-app flows with Android Studio are handiest supported on Android Studio 3.6 with version 42+ of the Flutter plugin for IntelliJ. The Android Studio integration additionally most effectively supports integrating the usage of a source code Gradle subproject, instead of the usage of AARs. See underneath for more info on the distinction.

Using the File > New > New Module… menu in Android Studio for your existing Android project, you can either create a new Flutter module to integrate, or choose an existing Flutter module that changed into created previously.

 

                Flutter module to integrate

If you create a new module, you may use a wizard to pick out the module name, location, and so on.

               wizard to pick out the module

The Android Studio plugin automatically configures your Android project to feature your Flutter module as a dependency, and your app is prepared to build.

2) Manually

This alternative allows a one-step build for each Android project and Flutter project. This alternative is handy while you work on each component concurrently and rapidly iterate, however, your team should set up the Flutter SDK to build the host app.

Include the Flutter module as a subproject withinside the host app’s settings.gradle:   

include ':app'                                   
setBinding(new Binding([gradle: this]))                               
evaluate(new File(                                                    
  settingsDir.parentFile,                                             
  'my_flutter/.android/include_flutter.groovy'                        
))

 

Assuming that my_flutter is a sibling to MyApp in the project.

The binding and script evaluation lets in the Flutter] module to consist of itself (as :flutter) and any Flutter plugins utilized by the module (as :package_info) withinside the evaluation context of your settings.gradle.

Introduce an implementation dependency at the Flutter module from your app:

Declare an implementation dependency on the Flutter module in your application:

dependencies {
  implementation project(':flutter')
}

Need a consultation?

Drop us a line! We are here to answer your questions 24/7.