In actual project development, Flutter is usually tried in small businesses, so Flutter is used to write a small interface and then integrated into existing Android projects

There are two main ways to integrate the Flutter Module. One is to import the Flutter Module through AndroidStudio, and the other is to package the Flutter project into an AAR and put it into an Android project

Import directly from AndroidStudio

There are four main types of Flutter projects to rebuild in AndroidStudio:

  • Flutter Application

    For building user-facing applications

  • Flutter Plugin

    Export Android/iOS apis for developers to use

  • Flutter Package

    Used to create pure Dart components, like Widget components

  • Flutter Module

    Create Flutter components to integrate into the Android/iOS project master

Like using the Flutter write interface, it is suitable to create a Flutter Module

Create Flutter Project File -> New -> New Flutter Project

Once created, right-click on the existing Android project: New -> Module -> Import Flutter Module

Then you can see the imported Flutter project in AndroidStudio. The imported Flutter project is actually the.android Flutter project in our newly created Flutter Module

Let’s take a look at integrating the Flutter project with AndroidStudio. What does it do for us?

Add the following configuration to the settings.gradle file in the Android project, mainly for include Flutter

setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir.parentFile,
  '.. \\Flutter\\flutter_module\\.android\\include_flutter.groovy'
))

Copy the code

Build. Gradle = build.gradle = build.gradle = build.gradle

implementation project(':flutter')
Copy the code

The final display in AndroidStudio looks like the following:

You can then try to build the project and Manifest Merge Failed

The main reason may be that the Existing Android project uses the Support package, while the Flutter project uses AndroidX

Therefore, it is necessary to unify the support package. Since Google will not maintain the support package in the future and will switch to AndroidX, we had better change the support package in Android project to AndroidX

Google gives us one-click replacement in AndroidStudio:

Right-click the Android project -> Refactor -> Migrate to Androidx

Add the following configuration to app/build.gradle:

android {
    compileOptions {
        sourceCompatibility 1.8 targetCompatibility 1.8}}Copy the code

Finally, we can test integrating a page from Flutter into the home page of an Android project


private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.navigation_home:
                if (firstFragment == null) {
                    firstFragment = createFragment("first");
                }
                showFragment(firstFragment, "first");
                hideFragment(secondFragment);
                hideFragment(thirdFragment);
                return true;
            case R.id.navigation_dashboard:
                if (secondFragment == null) {
                    secondFragment = createFragment("second");
                }
                showFragment(secondFragment, "second");
                hideFragment(firstFragment);
                hideFragment(thirdFragment);
                return true;
                
            // from flutter page
            case R.id.navigation_notifications:
                if (thirdFragment == null) {
                    thirdFragment = Flutter.createFragment(null);
                }
                showFragment(thirdFragment, "flutter");
                hideFragment(firstFragment);
                hideFragment(secondFragment);
                return true;
        }
        return false; }};Copy the code

The effect is shown below:

Introduction through AAR

In addition to the.android/Flutter project introduced by the Flutter Module above, this project can be packaged as an AAR file

Android projects can then rely on aar files so that other developers can compile and run existing Android projects without installing the Flutter environment

Since the above example has introduced.android/Flutter into the Android project and it runs successfully, the main dependencies are fine and the aar file can be generated by adding the relevant configurations

I put the required configuration in a separate maven.gradle file to reduce the intrusion of existing Gradle

The maven.gradle file contains the following contents:

apply plugin: 'maven'
apply plugin: 'com.kezong.fat-aar'

dependencies {
    def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
    def plugins = new Properties()
    def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
    if (pluginsFile.exists()) {
        pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
    }
    plugins.each { name, _ ->
        println name
        embed project(path: ":$name", configuration: 'default')
    }
}

def mavenRepositoryUrl = 'file:\\D:\\repo'

uploadArchives {
    repositories.mavenDeployer {
        repository(url: mavenRepositoryUrl) {
            //authentication(userName: xxx, password: xxx)
        }
        pom.groupId = 'com.chiclaim.flutter'
        pom.artifactId = 'flutter-module'
        pom.version = '1.0.0'
    }
}

task androidSourcesJar2Nexus(type: Jar) {
    classifier = 'sources'
    from android.sourceSets.main.java.sourceFiles
}
artifacts {
    archives androidSourcesJar2Nexus
}
repositories {
    mavenCentral()
}

Copy the code

The Flutter module may also use third-party plug-ins. Com.kezong :fat-aar is also required

So you also need in the android/Flutter/build. Gradle file with the following configuration

buildscript {
    repositories {
        google()
        jcenter()
    }

    dependencies {
        classpath 'com. Kezong: fat - the aar: 1.1.7'
    }
}

// 最后引入 maven.gradle 文件
apply from: 'maven.gradle'
Copy the code

If you want to use the above configuration, make sure you change the mavenRepositoryUrl to your local directory, or upload the above configuration to the NEXUS server

Then double-click uploadArchives as shown below:

The AAR file is generated in the directory specified by mavenRepositoryUrl, as shown below:

Finally, copy the generated AAR file to Android, and the running effect is as shown below:

You can see that the contents of the third Tab do not have a DEBUG flag, which means that the AAR file we just typed is released, and when we switch to the third Tab, the interface displays quickly, much faster than in the example above. Android /Flutter is also debug when running Android projects. Android /Flutter is also debug when running Android projects

summary

This article describes two ways that Android projects integrate the Flutter module

In general, each method has its disadvantages and advantages, and can be used flexibly in actual projects according to the situation

  • Import directly from AndroidStudio

    The disadvantage of this approach is that every developer needs to install the Flutter development environment. The advantage is that we can run debugging directly when we write plug-ins that interact with the native, rather than having to package them into aar files and then replace them, which Android needs to load again

  • Introduction through AAR

    The downside of this approach, as mentioned above, is that it is frequently packaged as an AAR and replaced with an old AAR file during debugging. The advantage is that other project members do not need to install the Flutter environment

The cases covered in this article can be found at my github.com/chiclaim/An…

This concludes the introduction of Android project integration with the Flutter module. If you have any questions, please leave a comment.