Directory portal:A Guide to The Quick Start to Flutter

Remember that in chapter 1 of Mixed Development, we explained how to introduce a Flutter project into the official solution of an existing native project.

However, this solution requires modification of the native project configuration, which is not very convenient to use in large collaborative projects. Everyone needs to compile their own project and the Flutter project, although you may not be responsible for the Flutter development.

Can the Flutter project be completely decoupled from the native project in the form of a dependency library?

When you need to use the dependency, you need to remove the dependency library directly when you need to go offline.

When you look at this chapter, the answer is obvious: yes 😑.

You can package your Flutter project into an AAR package and then have the native project rely on this AAR when needed and remove it when not needed.

Let’s see how to do that.

1. Transform your Flutter project

💡 Tip: Upgrade the Flutter version to the latest version. The version used in this article is version 1.2.1.

1.1 You need a Flutter Application

If you start from 0, the first step you need to do is to create a Flutter Application.

It’s easy, follow the tips step by step, you can also refer to mixed development (I).

If you have a Flutter Module project, you need to enter the command line of your Flutter Module project directory:

flutter create temp
Copy the code

This creates a Flutter Application package named Temp under your Flutter Module project.

All you need to do is move the Android package from Temp to your Flutter Module project root and then delete the Temp package.

Yaml > pubspec.yaml > pubspec.yaml > pubspec.yaml > pubspec.yaml > pubspec.yaml > pubspec.yaml > pubspec.yaml

flutter: ... module: androidPackage: com.coorchice.flutter_module iosBundleIdentifier: Com. Coorchice. * * * * * * * * * flutterModule modified * * * * * * * * * * * * * flutter:...Copy the code

Delete the module: section configuration and click Packages Get to refresh it.

After completing these operations, you should see an Android project package in the Flutter project directory:

The reason for this is that the Android project that Flutter automatically generates has some proprietary configurations that would be cumbersome to recreate yourself.

If you already have a Flutter Application, you don’t have to do anything.

1.2 Reforming the Android Engineering package

Now, we need to revamp the Android project package a little 🛠.

1.2.1 Modifying build.gradle in the Root directory of the Android project

Modify build.gradle in the root directory of the newly generated Android project package:

subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"} * * * * * * * * * modified * * * * * * * * * * * * * subprojects {project. BuildDir ="${rootProject.buildDir}/app"
}
Copy the code

The purpose of Flutter is so that the third party plug-ins you introduce into Flutter can be packaged into the aar generated at the end.

Otherwise, there will be a crash that the third-party plug-in class cannot be found when running later.

1.2.2 Modifying build.gradle in app directory

You need to go to the app directory in your newly generated Android project package and modify the build.gradle module in that directory.

1. Modify android project to Module project:

apply plugin: 'com.android.application'********* modified ************* apply Plugin:'com.android.library'

Copy the code

2. Add the following to the Android {} node:

compileOptions {
   sourceCompatibility 1.8 targetCompatibility 1.8}Copy the code

3. Delete applicationId from Android {defaultConfig {}}.

4. Add to dependencies{}

implementation 'com. Android. Support: support - v13:27.1.1'
implementation 'com. Android. Support: support - annotations: 27.1.1'
Copy the code

Because these libraries are used in the Flutter SDK.

1.2.3 Adding a facade package

The facade package is actually generated in.Android in the Flutter Module project.

It contains two wrapped Java code files, such as the usual:

FlutterView flutterView = Flutter.createView(
   activity,
   getLifecycle(),
   "route0"
);
Copy the code

It’s in this package.

You can download the facade files. Zip decompression on the android engineering package app/SRC/main/Java/IO/flutter/under:

1. Modify the AndroidManifest. XML

The androidmanifest.xml of the Android project package needs to be modified in order to avoid conflicts in packaging when the aar package introduces native projects.

Delete the entire

node 😐.

2. Introduce AAR into the original project

2.1 packaging aar

After completing the steps above, you can begin to package the AAR.

Enter the command line of your Flutter project root directory:

flutter build apk
Copy the code

Wait for compilation to complete..

Generated aar wrapped in < Flutter project directory > / build/app/outputs/aar/app – the aar.

2.2 Adding an AAR to a native project

You can put the generated AAR into a remote repository and rely on it through implementation.

You can also copy the AAR package to your app/libs and add it to your app build.gradle:

implementation fileTree(include: ['*.aar'], dir: 'libs')
Copy the code

Then refresh the project.

🖼 to see the effect of the operation:

Congratulations to you! You have now decouple the Flutter project into an AAR package that you can add and remove 🎉 at any time in your native project.

Directory Portals: A Guide to The Quick Start To Flutter

How can I be found?

Portal:CoorChice homepage

Portal:Lot of CoorChice