There are two main options for native Android and Flutter integration:

1. Source code integration: the official source code integration solution

2. Product integration: The Flutter project is developed separately and released as an AAR package or iOS framework after development. The native project depends on the files generated by Flutter.

3. FlutterBoost scheme of salty Fish team. FlutterBoost address

The environment

First check that the environment is correct: focus on the version of Flutter Version here. Different versions of Flutter will differ later in the introduction of integration development.

flutter doctor -v
Copy the code

Here is my environment information:

integration

Creating an Android project

Skip the process of building a Native Android project.

Note: (1) The existing Flutter Module is created to support Android X by default, so if you want to integrate the Flutter Module into your existing project, you need to replace the support package with Android X. So here’s a demonstration of the mixed development process by creating a new Native Android project that supports Android X by default. (2) Configuration information needs to be set in app/build.gradle

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

Create a Flutter module

  1. Switch the channel of flutter to the Master (the Preview version of flutter is under the Master branch)
flutter channel master
Copy the code
  1. Create a Flutter Module After the project module is the name of the new Flutter Module.
flutter create -t module flutter_test
Copy the code
  1. The directory structure of the Flutter Module:

(1) The module project of Flutter contains a hidden.android and.ios directory that contains runnable Android and ios projects.

Note that there is a flutter directory in both.android and.ios directories. This is our library project for flutter. The libraries that Android uses to generate aArs and iOS uses to produce frameworks.

The Flutter Application project does not have. Android and. Ios directories. The Flutter Application project corresponds to the Android and ios directories.

(1) Manage the project with Git, which will be introduced into native project in the form of submodule later. Skip the process of uploading Git to a remote Git repository.

(2) Focus on editing the gitignore file

Edit the.gitignore file under the project. You need to ignore the.ios and.android files under the project. .packages: git git git git git git Git Git Git Git

(3) My Gitignore configuration

.DS_Store .dart_tool/ .pub/ .idea/ .vagrant/ .sconsign.dblite .svn/ *.swp profile DerivedData/ .generated/ *.pbxuser *.mode1v3 *.mode2v3 *.perspectivev3 ! default.pbxuser ! default.mode1v3 ! default.mode2v3 ! default.perspectivev3 xcuserdata *.moved-aside *.pyc *sync/ Icon? .tags* build/ .ios/Flutter/Generated.xconfig .flutter-pluginsCopy the code

Native Android project integrates with Flutter

  1. Native Android project integrates with Flutter

(1) Switch the directory to the directory of Native Android code

(2) Add the Flutter Module to Native Android.

Git subModule update git subModule update git subModule updateCopy the code
  1. Add the following configuration to settings.gradle in the Native Android root directory: the path used here is relative to the path of the Native Android project.
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir,
        'flutter_test/.android/include_flutter.groovy'
))
Copy the code
  1. Add the dependencies of the Flutter library to the build.gradle file in the app directory of your Native Android project
implementation project(':flutter')
Copy the code
  1. After the new Rebuild project, there will be a subproject of the Flutter Module in the Native Android project directory.

The code

How to load a Flutter widget via Native? Flutter provides the following concentration methods. (There are differences between different versions of Flutter)

6.1 Directly add FlutterFragment to the corresponding native activity layout file by using the FlutterFragment class.

 <fragment
            android:id="@+id/flutterfragment"
            android:name="io.flutter.embedding.android.FlutterFragment"
            android:layout_width="300dp"
            android:layout_height="500dp" />
Copy the code

6.2 Register in Androidmanifest.xml through the FlutterActivity class

<activity
                android:name="io.flutter.embedding.android.FlutterActivity"
                android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
                android:exported="true"
                android:hardwareAccelerated="true"
                android:windowSoftInputMode="adjustResize" />
Copy the code

Default boot mode: Default route ‘/’

import io.flutter.embedding.android.FlutterActivity
val intent = FlutterActivity.createDefaultIntent(this)
startActivity(intent)
Copy the code

Start to the specified route

 val customFlutter = FlutterActivity.withNewEngine()
            .initialRoute("newRoute")
            .build(this)
        startActivity(customFlutter)
Copy the code

6.3 Through FlutterView Class No effect was achieved through this class, so it needs to be studied

FlutterView flutterView = new FlutterView(this); FrameLayout frameLayout = findViewById(R.id.framelayout); frameLayout.addView(flutterView); // Create a FlutterView that will not render. / / after calling the following code will render flutterView attachToFlutterEngine (new FlutterEngine (this));Copy the code

Potholes experienced in integration

  1. finished with non-zero exit value 1
Process 'command '/Users/mtdp/Documents/Flutter/flutter/bin/flutter' ' finished with non-zero exit value 1
Copy the code

This is due to the lack of.packages files, so try to keep.packages when managing flutter Module with Git.

  1. The deprecated class Flutter does not support a facade by default after a certain version. inFlutter version 1.7.8 + hotfix. 4The version is still supported, from which it will be removed, it is not clear.
io.flutter.facade.*
Copy the code

Ps: Previous approach (deprecated) (IO. Flutter. Facade) by using flutter.

View flutterView = Flutter.createView(
      MainActivity.this,
      getLifecycle(),
      "route1"
    );
    FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
    layout.leftMargin = 100;
    layout.topMargin = 200;
    addContentView(flutterView, layout);
Copy the code

By using Flutter. CreateFragment:

 FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
    tx.replace(R.id.someContainer, Flutter.createFragment("route1"));
    tx.commit();
Copy the code

Add problems after git submodule is removed

  1. Git submodule:
A git directory for 'formRenderLib' is found locally with remote(s):
  origin   xxxxxx
If you want to reuse this local git directory instead of cloning again from
  xxxx
use the '--force' option. If the local git directory is not the correct repo
or you are unsure what this means choose another name with the '--name' option.
Copy the code

The previous module 2 is not completely deleted.

2.1 In the Native Android main project directory, delete the files of the specified moduleCopy the code
Git rm -- Cached module nameCopy the code

2.2 Open. Gitmodules in the main project directory and delete the configuration information related to subModule

2.3 Open the. Git /config file in the main project directory to delete configuration information related to subModule

2.4 Deleting the cache module under.git

Rm -rf. git/modules/submodule nameCopy the code

2.5 Adding submodules

Git subModule Add git repository for submoduleCopy the code