Flutter is very popular at the moment. For current front-end students, learning Flutter is not that difficult, the learning curve is ok, but for students with Android or IOS development experience, it may be a little easier. If you have some Flutter and Dart knowledge, This is a necessary way to get started with Flutter. After learning about Flutter for a while, you will see how Flutter can be developed with Android and Ios. That is to say, how the pages of the Flutter project, Android and ios app project call each other. Here we will only give an introduction to how to call the Flutter project on Android. Those who have experience in the development of the two native apps will probably understand this in a second.

Before implementing the calls between the two, let’s prepare two projects (Android side and Flutter side)

First, the preparation work, here first interface

1. The Flutter native project interface

2. Android native project interface



Call the Flutter page step in the Android project
For those H5 users who have not been involved in android project development before, this is a difficult point. Now the community provides some information about how to call the Flutter page in android page:
1. Create a FlutterHybrid directory

2. Create a flutter native project of Flutter_module in the FlutterHybrid directory with the following command

flutter create -t module flutter_moduleCopy the code

Create the Flutter_module project by running the following command. After creating the flutter_module project, the directory structure is as follows:



3. Create an Android app project using AndroidStudio





Click Finish, wait for the Android project to load, and create the following interface:



4. Modify/Users/XXXX/flutter_hybrid FlutterHybridAndroid/Settings. Gradle, change file add the following content:

setBinding(new Binding([gradle: this]))
evaluate(new File(
    settingsDir.parentFile,
    'flutter_module/.android/include_flutter.groovy'
))Copy the code



5. Modify/Users/XXX/flutter_hybrid/FlutterHybridAndroid/app/build gradle file, in this file to add the following configuration:

(1) JAVA8 compiler 

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}Copy the code

Add dependencies for Flutter to dependencies 

implementation project(':flutter')Copy the code

(3) Display bit of the overall configuration item after adding:



6. Complete the above steps and run the app to see if you can start the Android emulator



7. If the following screenshot is displayed, the Android emulator is successfully started



8. The Android project can invoke the Flutter project in the following two ways

  • Using the Flutter. CreateView API
  • Use the FlutterFragment approach

9. Modify the Android project adding to Flutter module to invoke the Java code, the Android native project/FlutterHybridAndroid/app/SRC/main/res/layout/activity_main XML element is added

<Button 
android:id="@+id/test"    
android:layout_width="wrap_content"    
android:layout_height="wrap_content"    
android:text="Call the Flutter page in your Android project and pass argument 1"
/>
<Button 
android:id="@+id/test2"   
android:layout_width="wrap_content"    
android:layout_height="wrap_content"    
android:text="Call the Flutter page in your Android project and pass parameter 2"
/>Copy the code

10. Add the following code to the mainactivity. Java file of the newly created Android project: 

//1. Add to the page using FlutterFragmenttestButton click event Final String initParams ="Here are the parameters from the Android project.";
findViewById(R.id.test).setOnClickListener(        
    new View.OnClickListener() { @Override public void onClick(View v) { FragmentTransaction tx = getSupportFragmentManager().beginTransaction(); tx.replace(R.id.someContainer,Flutter.createFragment(initParams)); tx.commit(); }}); //2. Add to the page using the Flutter. CreateView APItestButton click event findViewById(R.id.2).setonClickListener (new View).OnClickListener() { @Override public void onClick(View v) { View flutterView = Flutter.createView( MainActivity.this, getLifecycle(), initParams ); Framelayout.layoutparams = new Framelayout.layoutParams (600,800); layout.leftMargin = 100; layout.rightMargin = 200; layout.topMargin = 300; addContentView(flutterView,layout); }});Copy the code

The contents of mainactivity.java are as follows:



12. If the project is upgraded to Android 3.0 or higher, some package names in the original Android will conflict with those in the upgrade or migration to AndroidX. At this time, we need to solve the problem of package name conflict, otherwise the project cannot run, the solution steps are as follows:

(1) use the migrate feature in androidStudio.



(2) modify the project/FlutterHybridAndroid gradle. The properties of the path of the file, modify the content
Add the following code to the file: 

android.useAndroidX=true
android.enableJetifier=trueCopy the code



(3) After making these changes, click on the Run button or Sync Now above to resynchronize the system


13. During the operation of the project, the Flutter package imported in the Android project will become invalid and need to be migrated to AndroidX
After that, all the Flutter packages need to use the Flutter packages in androidX. Here is a list of two files in the project that have conflicting package names and do as follows
Modify the
(1) to modify/flutter_module/android/Flutter/SRC/main/Java/IO/Flutter/facade/FlutterFragment. This Java
File, modify the imported package name: 

//import android.support.annotation.NonNull;
//import android.support.v4.app.Fragment;
import androidx.annotation.NonNull;
import androidx.fragment.app.*;Copy the code



. (2) modify/flutter_module/android/Flutter/SRC/main/Java/IO/Flutter/facade/Flutter. The Java
File, modify the imported package name: 

/*
import android.arch.lifecycle.Lifecycle;
import android.arch.lifecycle.LifecycleObserver;
import android.arch.lifecycle.OnLifecycleEvent;
*/
import androidx.lifecycle.*;Copy the code



Add parameters to the Flutter_module project that accept the parameters passed from the Android project by using the window object in Flutter.
Dart to use the window object, modify the main.dart file /flutter_module/lib/main.dart by first importing the UI package in main.dart 

import 'dart:ui';Copy the code



16 After these modifications, rerun the project with the following effect:
(1) The way of transferring parameters in Android project is as follows:



(2) Accept the parameters passed to the Flutter page as shown in the following figure. It can be seen that the Android project successfully called the Flutter project.




To sum up, heart is better than action, seeing is the problem, doing is the answer, only after hands-on practice to understand how the process is, to share with you, I hope to bring you a little help to avoid pit.