Flutter开发踩坑记录一：Flutter混合开发入门指南

文章适合人群：有android app开发基础

系列文章目录

1.Flutter混合开发入门指南

目录

一、三端分离模式

二、创建Flutter module的步骤

1.AS创建

2.命令行创建

三、原生项目中引入flutter模块

1.项目源码方式引入

2.aar包引用

三、其他注意事项：

四、试试效果

---

---

一、三端分离模式

 两种开发模式就不详细介绍了，三端分离模式为现在主流模式。使用三端分离模式Android端需要创建Flutter模块以module形式进行依赖，既可以在原有原生工程基础上进行拓展，也有利于项目管理。

二、创建Flutter module的步骤

两种创建方式（AS创建和命令行创建）

两种方式没有区别，AS创建更方便些

1.AS创建

以当前最新版本AS为例（Android Studio Chipmunk）

可能我的电脑性能差，创建过程有点卡，最后一步记得把 project type 换成 module

2.命令行创建

进入到原生android项目的同级目录，比如你的Android原生的项目路径是

some/path/MyApp

那就进入到 some/path 目录下面创建Flutter工程

cd some/path/
flutter create -t module --org com.example my_flutter

上面命令中 module表示项目类型，org后参数就是组织名称，最后一个参数是flutter项目的名字

---

三、原生项目中引入flutter模块

也有两种方式，一种是把flutter模块打包成aar，已aar依赖的形式引入。第二种是项目源码方式引入（如果需要flutter和原生同时开发和调试，比较适合这种）

1.项目源码方式引入

找到原生主工程项目的setting.gradle文件，加入如下内容

flutter_lib是我创建的项目名字

// Include the host app project.
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_lib/.android/include_flutter.groovy'
))
include ':flutter_lib'
project(':flutter_lib').projectDir = new File('../flutter_lib')

这里我遇到了一个问题，Binding报红，AS提示导入包。这里先不要导入其他包。

Binding是groovy-all.jar包中的类，由于我的项目依赖的gradle版本中缺少这个包导致报错，可以如下方式进行处理：

从

C:\Users\username\.gradle\wrapper\dists\gradle-6.7-all\cuy9mc7upwgwgeb72wkcrupxe\gradle-6.7\lib

下复制groovy-all-1.3-2.5.12.jar到

C:\Users\username\.gradle\wrapper\dists\gradle-7.4.2-all\9uukhhbclvbegdvsww0j0cr3p\gradle-7.4.2\lib

再重新打开项目

之后，在主工程app项目下面的build.gradle文件中引入flutter module：

dependencies {
    ...
    ...

    implementation project(':flutter')
}

注意！

注意！

这里引入的项目名字是 ':flutter' 而不是我们之前定义的flutter module的名字，千万别写错了！

2.aar包引用

cd some/path/my_flutter
flutter build aar

2.1 AS生成aar

将创建的flutter module用AS在另一个窗口打开

Build > Flutter > Build AAR

三、其他注意事项：

3.1 引入module成功之后，遇到依赖无法下载的情况，请在主工程的build.gradle中添加flutter用到的库的maven仓库：

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            allowInsecureProtocol true
            url "http://download.flutter.io"
        }
    }
}

3.2  flutter只支持三种cpu架构：

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

3.3 flutter的android引擎使用了java 8 特性

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

四、试试效果

在主工程的 AndroidManifest.xml 文件中加入如下activity：

尝试启动flutter页面：

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.suning.xd.shopkeeper.R
import io.flutter.embedding.android.FlutterActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById(R.id.btn_text).setOnClickListener {
            startActivity(
                FlutterActivity.createDefaultIntent(this)
            )
        }
    }
}

点击按钮跳转到以下页面，说明大功告成