Flutter系列（1）搭建开发环境，混合开发部署

本文基于Mac系统来搭建Flutter开发环境

一、安装Android Studio

使用Android Studio作为Flutter的开发工具

目前使用是3.5版本

官网下载自备梯子

由于我是做Android 开发的，Android Studio 安装过程就不详细演示了，安装完打开，按照提示下载SDK和一些工具即可~

二、安装 Xcode

在App Store 搜索 Xcode 安装打开即可

Xcode 是ios/mac的软件开发工具，Flutter 需要用Xcode打包才能安装到ios设备上。

三、安装Flutter

Flutter 国内站点不太稳定，可以通过环境变量配置其它稳定的站点，mac操作如下

控制台输入命令打开 ~/.bash_profile

open -e ~/.bash_profile

添加这两个变量

export PUB_HOSTED_URL=https://pub.flutter-io.cn  
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

环境变量

刷新环境变量

source ~/.bash_profile

如果是Windows 系统，右键点击计算机图标，依次选择属性–> 高级系统设置–> 高级–> 环境变量，新建用户变量 PUB_HOSTED_URL，其值为https://pub.flutter-io.cn；随后新建 FLUTTER_STORAGE_BASE_URL，其值为https://storage.flutter-io.cn，重启电脑即可完成配置。

下载Flutter

Flutter官网

下载最新稳定版

为了可以在命令行中执行 flutter 命令，配置环境变量

mac/linux 打开~/.bash_profile

open -e ~/.bash_profile

添加
export PATH=~/Documents/flutter/bin:$PATH

路径换成你自己的。

Windows 系统则是把Flutter 的bin目录配置到环境变量的 PATH后面即可

切换到开发分支

flutter channel dev

检查环境

flutter doctor

如图，我已经在Android Studio中安装了 Dart和Flutter插件（如果没有安装则按照提示去安装），只差一个ios的工具没安装，按提示安装即可~

四、创建flutter模块

命令行的方式

创建命令

flutter create -t module flutter_demo

运行

flutter run

如果环境配置正确，并且连接Android设备，Flutter项目就会运行到设备上。

五、创建插件

参考

flutter create --org com.example --template=plugin --platforms=android,ios -a kotlin plugin_hello

六、集成插件

编辑pubspec.yaml文件

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  plugin_hello: 
    path: plugins/plugin_hello

执行flutter pub get 即可

七、Flutter集成到Android项目

这里只说源码集成的方式

Android项目(FlutterApp)跟Flutter项目(Flutter_2021)是两个库，我们要在Android项目中，用git submodule 命令依赖Flutter项目

git submodule add https://github.com/lanshifu/flutter_2021.git
cd flutter_2021
flutter pub get

//执行下面命令同步submodule代码

git submodule update --init --recursive

修改Android项目的setting.gradle

include ':app'
rootProject.name = "FlutterApp"

#下面是新增的配置
setBinding(new Binding([gradle: this]))
evaluate(new File(settingsDir, 'flutter_2021/.android/include_flutter.groovy'))
include ':flutter_2021'
project(':flutter_2021').projectDir = new File('flutter_2021/')

注意：
Flutter项目名/.android/include_flutter.groovy路径不要写错，写错会编译失败，而且报错并不是这里。

app的build.gradle添加依赖

implementation project(':flutter')

然后让MainActivity继承FlutterActivity

class MainActivity : FlutterActivity() {
}

先不重写onCreate方法，运行可以看到效果。

image.png

配置和目录如上图所示。

踩坑

如果项目中有用到版本管理ext，可能遇到报错如下：

image.png

这个报错看了半天很无解，其它一个项目是正常的，看看源码位置

image.png

最后经过艰难排查，发现是版本管理ext里定义了一个android，读到的是配置的这个android，这个里面确实是没有applicationVariants对象...

image.png

排查这种问题，可以通过源码断言 assert ，appProject.android.applicationVariants != null ，如果不通过，会在控制台输出这个android对象。

---

aar集成方式和IOS集成方式可以参考如下官方链接：

Android集成参考
IOS集成参考