Flutter 48: 图解 Android 原生集成 Flutter Module

      小菜接触了 Flutter 一段时间，但与原生交互方面还未曾接触，今天根据 官方文档 学习一下 Android 原生如何集成最基本的 Flutter Module；

集成方式

1. 新建 Android Project

      小菜为了测试方便，新建一个 Android Project，本地路径为 …/ACE_Android/ACE_Demo01；

2. 新建 Flutter Module

2.1 命令行方式

      小菜首先采用如下命令行新建一个 Flutter Module，此时本地路径为 …/ACE_Android 与 ACE_Demo01 同级；

flutter create -t module my_flutter

2.2 AndroidStudio 工具方式

      小菜也用 AndroidStudio 尝试，同样简单便利；File -> New -> New Flutter Project -> Flutter Module；

3. Android Project 中添加依赖

3.1 手动引入

1. 在 setting.gradle 中加入 Flutter 的引入；

include ':app'
//加入下面配置
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'my_flutter/.android/include_flutter.groovy'
))

2. 在 app/build.project 中添加 Flutter 依赖；

implementation project(':flutter')

3.2 AndroidStudio 工具引入

      可采用 Flie -> Sync Project with Grdle Files 时，可通过 Import Flutter Module 方式引入；此时若报 The Gradle files could not be updated automatically 则需要手动 3.1 操作；

4. 原生与 Flutter 交互

      Android 引用 Flutter 通常是两种，一种是新建一个 View 用来展示 Flutter 页面，另一种是 Fragment；其本质还是将 Flutter View 作为 Android View 的子 View 展示；

      小菜新建一个无标题栏的 FlutterActivity 和一个 FlutterFragment，在 MainActivity 添加一个按钮跳转到 FlutterActivity 展示 FlutterFragment；

public class FlutterActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flutter);

        getSupportFragmentManager().beginTransaction()
            .replace(R.id.container, new FlutterFragment())
            .commit();
    }
}

public class FlutterFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
        @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);
        getActivity().getSupportFragmentManager()
            .beginTransaction()
            .add(R.id.container, Flutter.createFragment("/"))
            .addToBackStack("flFlutter.createFragmentutter")
            .commit();

        return rootView;
    }
}

      通过 Flutter.createFragment("/") 设置跳转路由；

5. 签名打包

      小菜直接运行 debuge 模式一切正常，只是在跳转 Flutter 时不如直接跳转原生流畅，后期优化；而打包成 release 包与 Android 原生相同，无需特别处理 Flutter Module；

注意事项

1. minSdkVersion >= 16

      小菜在集成过程中，使用 Flutter 时会提示 SDK 最低版本在 16 以上，需注意；

2. Flutter Module 路径

      小菜在学习过程中，无论是命令行创建还是 AndroidStudio 工具创建 Flutter Module 路径并非一定要与 Android Project 同级，关键是 setting.gradle 路径配置；

      new File 文件第一个参数 settingsDir.parentFile 即 Android Project 所在文件路径，第二个参数为 Flutter Module 中 .groovy 路径；我们可以使用只有一个参数的完整路径；

// 两个参数
evaluate(new File(
        settingsDir.parentFile,
        'my_flutter/.android/include_flutter.groovy'
))

// 一个参数
evaluate(new File(
    '/Users/user/Documents/workspace/ACE_Flutter/flutter_module01/flutter_module01/.android/include_flutter.groovy'
))

3. 新的 evalute 会覆盖上一个

      小菜测试是，在 setting.gradle 中引入多个 evalue，以为可以同时引入多个 Flutter Module，而实际是后面的引入会覆盖先前的引入，以最后一个 evalue module 为准；

---

      小菜对 Android 与 Flutter 交互接触较少，需进一步学习；如有错误请多多指导！

来源：阿策小和尚
欢迎闲来吐槽