前言
flutter 近两年热度不断上涨,社区里也有许多优质的包可以直接使用https://pub.flutter-io.cn/
其跨平台,声明式ui,优秀的动画设计等特点，使其完全不输原生应用，但是如果纯使用flutter构建商业性应用存在着一定的风险，需要很了解原生应用环境，所以flutter作为一个页面或者组件插入在原生应用还是不错的选择，本文将阐述原生应用接入flutter Module。

timg.jpg

1.创建Flutter Module

在Android工程中集成flutter，我们要保证 将要使用的Flutter Module工程与原生Android工程 在同一根目录下 ，Terminal进入到项目根目录，执行flutter create -t module ‘module名字’例如：flutter create -t module flutter_module例如。
1.1根目录下执行命令(命令行创建module)

flutter create -t module flutter_module

image.png

image.png

image.png

image.png

image.png

2.在Android项目中引入flutter_module

2.1 在setting.gradle文件中添加

setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir,
  '../flutter_module2/.android/include_flutter.groovy'
))

2.2 app的build.gradle中引用这个flutter模块即可
引入之前最好 再修改两个配置:

   ...
//1.
  defaultConfig {
        applicationId "com.example.flutter_hybrid_android"
        minSdkVersion 16   //minSdkVersion版本最低不能低于16因为flutter 最低支持16了
        targetSdkVersion 29 
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    ....
//2. 指定使用java8版本编译，高版本java可能删除了一些用到的特性
 + compileOptions {
    +    sourceCompatibility JavaVersion.VERSION_1_8
     +   targetCompatibility JavaVersion.VERSION_1_8
   + }

在dependencies 中引入 （implementation project(path: ':flutter')）

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
  + implementation project(path: ':flutter')
}

至此我们就已经在项目中引入到flutter module了

3. 使用flutter module

两种使用方式，FlutterView和FlutterFragment。
这里使用FlutterFragment用法（需要了解FlutterView方法的请自行百度了~）

//\app\src\main\java\com\example\flutter_hybrid_android\MainActivity.java
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.test).setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
            //页面上的按钮点击的时候 向占位符里 添加一个 flutter module
                FragmentTransaction tx = getSupportFragmentManager()
                        .beginTransaction();
            //FlutterFragment中的 initialRoute方法接收一个 string参数 可以传到flutter中接收
                FlutterFragment fragment=FlutterFragment.withNewEngine().initialRoute("{name:'张三'}").build();
                tx.replace(R.id.anchor,fragment);
                tx.commit();
            }
        });
    }
}

布局的xml文件

//\app\src\main\res\layout\activity_main.xml

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

    <Button
        android:id="@+id/test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点击显示flutter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <FrameLayout
        android:id="@+id/anchor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
    </FrameLayout>
</LinearLayout>

在flutter中接收Android端发送的参数

import 'dart:ui';
...
void main() => runApp(MyApp(initParams:window.defaultRouteName)); //接收参数 可用于向下传递
class MyApp extends StatelessWidget {
  String initParams = '';
  MyApp({this.initParams});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page',initParams:this.initParams),
    );
  }
}
...

效果如下

image.png

4. 如何在Android调试flutter module

我们平时开发flutter时 有重新启动/热重启的功能，但是作为module在Android中，无法进行这样的调试，那该怎么最为module使用 重新启动/热重启呢？
4.1：

• 先保证在电脑上打开一个 模拟器或链接手机
• 关闭我们的项目app
• 在flutter module根目录下 执行flutter attach
  
  image.png
  
  在 手机或模拟器上 打开这个app 打开flutter 部分时我们看到
  
  image.png

这时就可以在控制台 点击 r/R 等热键 调试flutter module了