Flutter 即学即用系列博客——03 在旧有项目引入 Flutter

前言

其实如果打算在实际项目中引入 Flutter，完全将旧有项目改造成纯 Flutter 项目的可能性比较小，更多的是在旧有项目引入 Flutter。

因此本篇我们就说一说如何在旧有项目引入 Flutter。

官方 WIKI 有说明，但是里面坑还是不少的，变化也是存在的。

因此就让我们来看一看。

目录

1. 按照官网实现基本引入

Add Flutter to existing apps

上面为GitHub WIKI 的引入方式，通过 Module 的形式进行引入。

可以看出文档还是在不断更新的。

下面我们说下具体的步骤：

第一步：创建 Flutter Module

假设已经存在的 Android 项目路径为 /Users/nesger/Desktop/nesger_folder/project/studio/MyApp，那么我们在同级目录下面创建 Flutter Module。在终端执行如下命令：

cd /Users/nesger/Desktop/nesger_folder/project/studio/ 
flutter create -t module my_flutter

执行命令之后，就创建了一个带有 dart 代码的 Flutter Module，并且能够看到一个隐藏的文件夹 .android。

第二步：让主 APP 依赖 Flutter Module

这里，主 APP 指的就是 Android 项目 MyApp。

在 MyApp 的 settings.gradle 添加下面代码：

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

在需要使用 Flutter Module 的 MyApp 的对应 Module 添加依赖，比如本例子中就是到 MyApp 中的 app 的 build.gradle 添加

dependencies {
  implementation project(':flutter')
}

添加完之后有个报错如下：

Manifest merger failed : uses-sdk:minSdkVersion 15 cannot be smaller than version 16 declared in library [:flutter] /Users/nesger/Desktop/nesger_folder/project/studio/my_flutter/.android/Flutter/build/intermediates/merged_manifests/debug/processDebugManifest/merged/AndroidManifest.xml as the library might be using APIs not available in 15
	Suggestion: use a compatible library with a minSdk of at most 15,
		or increase this project's minSdk version to at least 16,
		or use tools:overrideLibrary="com.nesger.myflutter" to force usage (may lead to runtime failures)

从这里可以看到是由于我们 MyApp 的 uses-sdk:minSdkVersion 与 Flutter Module 的不一致。

控制台也给出了解决方法，我们这里简单的升下我们 MyApp 的 uses-sdk:minSdkVersion 即可。

改完编译就没问题了。

第三步：使用 Flutter Module 提供的 API 在主 APP 中创建 FlutterView

我们的主界面布局如下，就是有一个按钮而已。

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

    <Button
        android:onClick="onClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="create flutter view"
        />

</RelativeLa