DEV Community

Cover image for How to add Flutter to Android App
aseem wangoo
aseem wangoo

Posted on

How to add Flutter to Android App

In case it helped :)
Pass Me A Coffee!!

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
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"
    }
}
Enter fullscreen mode Exit fullscreen mode
  • 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'
Enter fullscreen mode Exit fullscreen mode

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
Flutter_nps project

  • We use the following command for generating the AAR
flutter build aar
Enter fullscreen mode Exit fullscreen mode

which also shows us the on-screen instructions to integrate

Flutter AAR integration steps
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
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"
    }
}
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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)
    }
}
Enter fullscreen mode Exit fullscreen mode

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"
/>
Enter fullscreen mode Exit fullscreen mode

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)
)
Enter fullscreen mode Exit fullscreen mode
  • 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 :)
Pass Me A Coffee!!

Discussion (0)