How to add Flutter to Android App

In case it helped :)

We will cover briefly:

1. Adding flutter to the existing android app
2. Adding flutter to the new android app (Compose)

Note: This article assumes the reader knows about android

Add to App

It’s sometimes not practical to rewrite your entire application in Flutter. For those situations, Flutter can be integrated into your existing application piecemeal, as a library or module. That module can then be imported into your Android or iOS app to render a part of your app’s UI in Flutter.

The add-to-app feature supports integrating multiple instances of any screen size. Having multiple Flutter instances allows each instance to maintain an independent application and UI state while using minimal memory resources. See more on the multiple Flutters page.

Adding flutter to the existing android app

Flutter 3 was announced on 11th May 2022. There was a talk called What’s New In Flutter in which the speaker showed an application called Put Flutter to Work. 

Put Flutter to Work

We will be adding the flutter feedback screen to the android app

Begin

Let’s open the app’s build.gradle and see the section under repositories 

repositories {
    google()
    mavenCentral()
    String storageUrl = "https://storage.googleapis.com"
    maven {
        url '../../flutter_nps/build/host/outputs/repo'
    }
    maven {
        url "$storageUrl/download.flutter.io"
    }
}

• We see the project depends upon a local path inside the flutter_nps
• The same is observed if we open the project’s build.gradle 
• The project also depends upon the following flutter specific dependencies

debugImplementation 'com.example.flutter_nps:flutter_debug:1.0'
profileImplementation 'com.example.flutter_nps:flutter_profile:1.0'
releaseImplementation'com.example.flutter_nps:flutter_release:1.0'

As of now, the path flutter_nps/build/host/outputs/repo doesn’t exist in our machine, let’s investigate the flutter_nps project now

Add the Flutter module as a dependency

There are two ways to add the Flutter module as a dependency on your existing app. We will be going with the AAR (Android Archive)

The AAR mechanism creates generic Android AARs as intermediaries that package your Flutter module. 

• This packages your Flutter library as a generic local Maven repository composed of AARs and POMs artifacts.
• We have the following folder structure for the flutter_nps app

Flutter_nps project

• We use the following command for generating the AAR

flutter build aar

which also shows us the on-screen instructions to integrate

Flutter AAR integration steps

and now if we run our android app, it should work…🎉🎉🎉🎉

Note: The android app which was used in the above section doesn’t use the Compose. In the next section, we will integrate Flutter in a Compose app

Adding flutter to the new android app (Compose)

In this section, we will create a new android app but with Compose Activity.

Begin

• Create New Project and Select EmptyComposeActivity and this will create a Compose project
• We create a button component on the main screen

Compose Button

• Let’s open the app’s build.gradle and under repositories add the following

repositories {
    google()
    mavenCentral()
    String storageUrl = "https://storage.googleapis.com"
    maven {
        url '../../flutter_nps/build/host/outputs/repo'
    }
    maven {
        url "$storageUrl/download.flutter.io"
    }
}

and also add the above to the project’s build.gradle 

• Inside the dependencies of app build.gradle add the following

debugImplementation 'com.example.flutter_nps:flutter_debug:1.0'
profileImplementation 'com.example.flutter_nps:flutter_profile:1.0'
releaseImplementation'com.example.flutter_nps:flutter_release:1.0'

Note: Try removing the profileImplementation in case the gradle gives any errors

• The above steps implies that our new project requires the AAR from the flutter_nps (since we are reusing the same flutter project).
• The steps for building the AAR remain the same as we saw in the above section.

Next, we create the Application class which extends the Application Also, register this inside our Manifest.xml under android:name="<YOUR APPLICATION CLASS>"

class AddFlutterApplication : Application() {
    lateinit var flutterEngine: FlutterEngine
    companion object {
        const val FLUTTER_ENGINE_NAME = "nps_flutter_engine_name"
    }
    override fun onCreate() {
        super.onCreate()
        flutterEngine = FlutterEngine(this)

        flutterEngine.dartExecutor.executeDartEntrypoint(
            DartExecutor.DartEntrypoint.createDefault()
        )

        FlutterEngineCache
            .getInstance()
            .put(FLUTTER_ENGINE_NAME, flutterEngine)
    }
}

• We initialize the FlutterEngine which is the container through which Dart code can be run in an Android application
• To start running Dart and/or Flutter within this FlutterEngine, we get a reference to this engine's DartExecutor and then use DartExecutor.executeDartEntrypoint(DartExecutor.DartEntrypoint)
• Finally, we cache the flutter engine to be used by the FlutterActivity
• FlutterEngineCache is useful for storing pre-warmed FlutterEngine instances. The ID of a given FlutterEngine can be any string

Since we are going to launch a Flutter activity, we will need to register it as an activity under Manifest.xml (otherwise it gives an error…)

<activity
  android:name="io.flutter.embedding.android.FlutterActivity"
          android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|s creenLayout"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize"
/>

At last, we need to launch the FlutterActivity.

• We do so by calling the startActivity from the context 

context.startActivity(
  FlutterActivity
       .withCachedEngine(AddFlutterApplication.FLUTTER_ENGINE_NAME)
  .build(context)
)

• This withCachedEngine can be used to configure an Intent to launch a FlutterActivity that internally uses an existing FlutterEngine that is cached and is identified using the cached engine ID (which is the same we used while registering inside the Application).

and now if we run our new android app, we see it working…🎉🎉🎉🎉

Source code.

In case it helped :)

Comments

[LouatiMohamed]

To build an AAR (Android Archive) from a Flutter project and integrate it into an Android application
i hav a problem in [io.flutter.embedding.android.flutteractivity was not found in the project or the libraries]