软件定制开发供应商【Flutter】01：Flutter开发环境配置-巴掌软件-高性价比的软件定制开发解决方案

前言：什么是flutter？

Flutter是Google软件定制开发供应商开源的构建用户界面的工具包，软件定制开发供应商帮助开发者通过一套代软件定制开发供应商码库高效的构建多平台软件定制开发供应商的精美应用，软件定制开发供应商支持移动端，Web端，软件定制开发供应商和嵌入式平台。

软件定制开发供应商工欲善其事必先利其器！软件定制开发供应商我们需要先搞定的开发软件定制开发供应商环境才能愉快的玩耍~

一、flutter SDK下载

网址：

选择系统版本

下载sdk。

上面的SDK建议放到自己的电脑‘家’目录下解压，这样flutter获取的权限更高。

二、配置环境变量

在终端中打开配置文件 vim ~/.zshrc ：添加配置

配置完成后保存，然后重新载入配置：

source ~/.zshrc

然后在终端cd到flutter目录下，输入 ’ flutter doctor ‘验证是否配置成功

来看医生检测问题：

有3个问题：

1.Android的SDK未安装。（依赖）

2.cocoapods有更新。

3.Android Studio未安装。（后续开发flutter需要用到）

我们接下来来解决检测问题。

三、doctor检测处理

1.更新cocoapods

doctor中一个warning说cocoapods版本1.8.4太低了，推荐1.10.0。

不过更新cocoapods前需要先更新ruby，更新ruby有brew和rvm两种方式，这里我们采用rvm的方式，但rvm版本较旧，我们先升级rvm

rvm get head  //更新rvm

升级了rvm

rvm list known

通过上面命令查看rvm已知的最新列表

这时可以看到有ruby最新版本3.0.2了，但是ruby的3.0版本以上目录就不在“/.rvm/gems/ ”下了，所以比较麻烦，我们更新2.7.4。

我们用rvm安装2.7.4的ruby

rvm install 2.7.4

最终rvm install 2.7.4

这里需要注意一点，ruby存在多个版本的话，如果指定某个版本作为默认版本的话，需要输入如下命令设置默认，否则打开新的终端页面查看ruby版本，还会是旧的。

rvm use 2.7.4 --default  //设置默认ruby版本

然后sudo gem install cocoapods 更新cocoapods

成功安装了1.11.2版本

看来再来查看下flutter doctor。

啊！cocoapods警告没有了！在安装Android Studio之前需要先安装Android SDK。

2.安装Android Studio

下载网址：

根据自己的电脑芯片是M1还是intel的，选择性下载。

下载完以后安装Android Studio

询问是否导入之前的配置，选择不导入。

共享数据分析，不发送。

由于此版本Android Stuio不包含Android SDK，这里跳过选Cancel。

由于我没有梯子，尝试下面设置proxy后并不能下载SDK，所以选择了Cancel，自己去网上自己下载Android SDK。

手动设置~ “ mirrors.neusoft.edu.cn”

NEXT；

NEXT;

编程主题风格，根据自己喜好选择~ 这里我选的黑色~

Finish!

Finish！

但是报了一个错误！ SDK emulator directory is missing

3.下载SDK

手动下载SDK：

下载并解压后，将文件夹放在下面目录，通过./Android sdk命令打开Manager。

点击右下侧install 10 packages.

install。

安装完以后还要更新。。。

打开Android Studio的偏好设置，点击Edit将目录修改为左侧地址

downloading Components.

至此我们就安装好了如上勾选的工具。

4.安装flutter插件

还是在Android Studio的偏好设置中，插件找到flutter，并install。

提示安装Flutter的使用语言Dart，安装。

至此，我们就可以创建Flutter的工程了。

在去到flutter的根目录下执行flutter doctor检测下还有没有问题~

显示找不到android sdk的位置，

vim ~/.zshrc

source ~/.zshrc

使配置生效

flutter doctor再次检测

5.license问题

安装完Android SDK Command-line Tools之后我们再来检测下

还是报错，但是少了点，我们再试下错误给的提示 --android-licenses

哇偶，可以了呢，我们一路 y 下去就可以了~

5.Java 问题。

终于只剩下Java了，终端中依次输入如下命令进行软链接：

软链接用法是： ln -s 实际存在的目标目录链接名称(不存在的) 。


cd /Applications/Android\ Studio.app/Contents/jre
ln -s ../jre jdk
ln -s "/Library/InternetPlug-Ins/JavaAppletPlugin.plugin"jdk
flutter doctor -v

至此我们终于安装完了Flutter，检测也都通过了，可是废了老鼻子劲了。。。

撒花撒花~~~

四、夜神模拟器下载安装

网上可以找到，这里放个链接：

下载完安装即可，在使用Android Studio时可以选择对应的安卓模拟器，可查看当前代码下安卓端的显示效果。

五、配置

其中在使用安卓模拟器时可能会遇到gradle卡死的问题。因为Gradle的Maven仓库在国外，没有梯子就会卡。如果未出现卡死问题，则不用做如下处理~

一直显示Running Gradle task 'assembleDebug'......

这种情况比较简单，配置个镜像就好了。

1.修改项目下的 /Android/build.grade.

将其中的bulidscript和allprojects的


google() 
jcenter()

修改为阿里云镜像


maven{url'https://maven.aliyun.com/repository/google'}
maven{url'https://maven.aliyun.com/repository/jcenter'}
maven{url'http://maven.aliyun.com/nexus/content/groups/public'}

如下图：

2.修改flutter安装目录下/packages/flutter_tools_grade/flutter.gradle

做出上面的修改即可。

六、创建一个工程看看。

这里命名规则和iOS不同，是不允许用驼峰的方式的，可以用下划线隔开~

创建成功，我们进目录看一下

双击打开iOS的工作台

可以看到里边实际是用swift语言写的，如果有想改用oc语言的话需要创建的时候就指定好。

在flutter的help里看到ios默认是swift，android默认是kotlin。

删掉demo我们重新建一个oc语言的。

我们再打开一下新demo的工作台看看

就变成oc语言的了~~

再回到终端，cd到flutter_demo的根目录下，

open -a Simulator

开启iPhone模拟器，

flutter run

运行flutter

可以看到界面成功启动，点击右下角按钮数字会自增，尝试一下几个命令

r --直接刷新

R --热重启

c --clear

其中r命令是直接刷新，数字不会变。

R命令热启动，数字会清零。

七、Android Studio打开flutter

可以选择Open我们刚才创建的demo工程，也可以直接将工程拖进AS(Android Studio，一下均简称AS)。

左上角的文件夹形式我们换成Project，就变成我们熟悉的类似xcode目录了。

修改部分代码后发现界面会实时刷新，不用像xcode一样，每次修改了代码都需要重新运行app，UI调整速度快的一批！

因为flutter用的增量机制，只会检测修改的部分代码，重新渲染，其他未修改的不会动。

点击闪电图标只会刷新显示，不会刷新状态，所以我们点了+按钮以后点Hot Reload数字是不会变的，但是点Hot Restart以后状态就清空了，数字也会变回0。

Android模拟器：

这里就用到上边下载的夜神安卓模拟器了。

而且需要配置gradle的相关东西。

八、总结

至此，我们就把Flutter的环境配好了，可谓是好事多磨啊-_-||。