Flutter Mudule accesses Android native ``2020 Big Front-end Hybrid Development''

I. Introduction

• In 2020, flutter is no longer a new technology. Major apps, led by'Xianyu', are embracing flutter. At present, the most ideal is to use flutter to develop completely, but since their respective apps are all shaped, the previous code is completely abandoned. Flutter, both human and material resources are unrealistic, so the current thinking of most products is to carry out mixed development and gradually flutter
• Since the major apps involved flutter earlier and the technology used is too old, in view of this, I combined Google’s latest official documents and online summary to study a set of practical solutions for your reference

2. Preparation

• Since it is a mixed development, two projects are required first: an Android project and a flutter project

2.1 Open the android project

• Android studio directly new or open the existing one, no special requirements
  

2.2 New flutter project

• There are two situations in flutter project:
  • The flutter project already exists, directly import and use
  • Pure new project, just create a new type of module directly

2.2.1 Existing flutter project

• Just open it directly
• Enter Terminal (Mac system is: press command + shirft + p at the same time to open)
  

2.2.2 Need to create a new flutter project

• If you don’t have a flutter project yet, and you need to create a new one, select Android studio to proceed:
• Open Android studio and select new-new module in file
  
• Just enter the name to create a new one, there is no special configuration
• After creating a new one, you can sync
  

Three, access

• Access inheritance As mentioned above, sub-access already exists flutter project and access module
• Before this, we must first configure the Android project

3.1 Android project public configuration

• Proceed as follows

3.1.1 Configure ndk

android {
    
    
  //...
  defaultConfig {
    
    
    ndk {
    
    
      // Filter for architectures supported by Flutter.
      abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
    }
  }
}

• The location is as follows
  

3.1.2 Configure Java 8

• Configure Java 8 in build.gradle, the new version has been configured by default

android {
    
    
  //...
  compileOptions {
    
    
    sourceCompatibility 1.8
    targetCompatibility 1.8
  }
}

• The configuration path is as follows:
  

3.2 Access Flutter Module

• There are two situations in the old flutter project:
  • Existing flutter project
  • The flutter project just created as a module
• Let me talk about the access method of the flutter project that was just created in the form of a module.

3.2.1 Android Flutter Module access

• Use Terminal cd to directly hit arr under the module
  
• Follow the prompts to modify build.gradle

  1. Open <host>/app/build.gradle
  2. Ensure you have the repositories configured, otherwise add them:

      repositories {
    
    
        maven {
    
    
            url '/Users/huangyuanhao/StudioProjects/flutter_module/build/host/outputs/repo'
        }
        maven {
    
    
            url 'http://download.flutter.io'
        }
      }

  3. Make the host app depend on the Flutter module:

    dependencies {
    
    
      debugImplementation 'com.superpentagon.fluttermodule:flutter_debug:1.0
      profileImplementation 'com.superpentagon.fluttermodule:flutter_profile:1.0
      releaseImplementation 'com.superpentagon.fluttermodule:flutter_release:1.0
    }


  4. Add the `profile` build type:

    android {
    
    
      buildTypes {
    
    
        profile {
    
    
          initWith debug
        }
      }
    }

• After modification as follows:
  
• ⚠️ Note: some content needs to be modified
• Get the repo path and replace it with the repo path of your own machine
• To replace the domestic mirror, here I use the Tsinghua mirror, if it fails, please go here to choose: flutter community mirror acquisition

    maven {
    
    
        url 'https://mirrors.tuna.tsinghua.edu.cn/flutter/download.flutter.io'
    }

• amend as below
  
• Finally, replace it with your local package name here.
  

3.2.2 Test run

• Call Flutter in MainActivity. For some tool codes, see: Super-Pentagon-p01_android_proj

        // 初始化 Flutter
        FlutterMain.Settings settings=new FlutterMain.Settings();
        settings.setLogTag("MyFlutter");
        FlutterMain.startInitialization(this,settings);
        String[] args = {
    
    "info", "data"};
        FlutterMain.ensureInitializationComplete(this,args);

        // 初始化 FlutterEngine.
        FlutterEngine flutterEngine = new FlutterEngine(this);
        // Configure an initial route.
        flutterEngine.getNavigationChannel().setInitialRoute(FlutterEngineUtils.Home.HOME_PAGE_ROUTE + "?{\"message\":\"StephenCurry\"}");
        // Start executing Dart code to pre-warm the FlutterEngine.
        flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
        // Cache the FlutterEngine to be used by FlutterActivity or FlutterFragment.
        FlutterEngineCache
                .getInstance()
                .put(FlutterEngineUtils.Home.HOME_PAGE_ROUTE, flutterEngine);


        FlutterOperationUtil.init().initFragmentById(FlutterEngineUtils.Home.HOME_PAGE_ROUTE).initLayoutId(R.id.main_container).startFlutterTransation(getSupportFragmentManager());

• The layout is as follows

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <FrameLayout
            android:id="@+id/main_container"
            android:visibility="visible"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </RelativeLayout>

</LinearLayout>

• Details are as follows:
  
• Due to too much design code, some tools are detailed in: Super-Pentagon-p01_android_proj

3.2.3 perfectly test run

• Works perfectly
  

Four, summary

• Reading here, some readers will definitely encounter a problem: some projects may have been involved in Flutter very early, so it is difficult to use here and then use Module to access
• This is the solution is to package arr. In fact, the method of packaging is very simple, but due to space limitations, I will not expand it here.
• I will give a detailed introduction in the next article, welcome everyone to pay attention to _yuanhao CSDN to receive more high-quality blog posts in time!