iOS开发 超详细Flutter开发环境搭建

Posted 2023-03-30 weixin_40847622

1 、安装Flutter

此文章针对针对移动开发者，关于Flutter环境搭建，仅供参考，也可参考官网<https://flutter.dve/>

1.1、下载Flutter SDK

进入Flutter官网<https://flutter.dve/>

 此网站为中国网站，无需翻墙即可进入

进入后，此处便为Flutter SDK下载地址了，根据自己的操作系统选择（本人为MacOS系统，下面以本人电脑为例操作）。

 

此处针对不同电脑芯片提供了两个不同的SDK，想查看自己的电脑芯片类型，点击左上角苹果图标->“关于本机”里查看，这里不再赘述。

下载完成以后，那么接下来就是安装路径了

因为Flutter的SDK中包含了很多命令行工具，我们需要配置环境变量，所以建议你安装到你平时放命令行工具程序的地方！我这里式放在家目录下～/flutter（仅供参考，安装在哪看个人习惯）。

1.2 配置环境变量

1.2.1 配置镜像

因为Flutter在运行时，需要去官网瞎子啊所需资源，那么你就需要镜像服务器，以下是官方文档的友情提示

意为如果你在中国，首先阅读Using Flutter in China，点击进入后可看到配置方式

来到我们的配置文件对shell进行配置，打开终端

如果你使用的是bash，就配置bash.profile文件，如果使用的是zsh，就配置zshrc文件

（如何查看自己使用的是哪个，在终端输入chsh，提示输入开机密码，输入时不显示，输入完直接回车即可） 

 

此处若为shell：/bin/zsh/就是zsh，在.zshrc中配置，如果是shell：/bin/bash/，就是bash，在.bash_profile中配置（此处要退出终端，英文状态下输入i，进入编辑模式，然后按esc，紧接着输入：wq回车即可）。

1.2.2配置shell 

如果是zsh，终端输入vim ~/.zshrc  ,如果是bash，输入vim ~/.bash_profile  再按i进入编辑模式，将下面的代码粘贴进去

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

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

1.2.3配置flutter环境变量

接下来，将flutter命令行工具的路径配置以下，还是在对应的这个shell文件中，其中这个FLUTTER对应下载的flutter SDK解压后的文件路径

$ export FLUTTER=~/flutter

$ export PATH=$FLUTTER/bin:$PATH

输入完成后，按esc，在输入:wq  即可退出，完成配置。配置完成后，退出重新打开终端，或者输入载入命令使配置生效，载入命令为  source ~/.zshrc 或者source ~/.bash_profile  还是取决于你的zsh还是bash。

完成后，我们可以看看flutter配置是否成功了。flutter有一个doctor检测命令。专门检测的flutter环境配置是否成功的

$ flutter doctor

输入后回车，绿色对号就是配置完成的了，红色叉就是没有配置好的，此处应该还有红色的叉，因为后面还没有配置android studio或者VS，其实此处，只要不出现command not found: flutter，就算环境变量配置成功了。

接下来，就是配置Android studio或者VS Code了

开发flutter，对于ios开发者来说，这两个都可以，但是他们的区别在于，VS Code更轻量化，运行的更快，Android studio相对较笨重，而Android studio有更多更方便的插件，选择哪个看你自己，本人倾向于Android studio，下面就以Android studio作为开发工具介绍配置过程。

---

2、 安装Android studio

2.1下载Android studio

我们先安装Android studio，可以去国内官网<https://developer.android.google.cn/studio>下载

进入首页后，点击此处Download  Android Studio，进入下载页。下拉到底部，勾选同意协议

下面这两个，还是根据自己的电脑芯片类型选择不同版本， 左边是inter芯片版本，右边为苹果芯片版本

 2.2、配置SDK

下载完成后，根据安装向导完成安装。打开Android Studio，按键盘上的command + 逗号，依次点开Appearance & Behavior——>System Setting，点击Android SDK，右侧点击SDK Tools，取消勾选Hide Obsolete Packages，然后勾选图中三个插件下载安装

下载完关掉此页，来到首页 

点击左侧Plugins,右侧搜索框输入flutter搜索，然后点击install下载安装 

完成后会弹出安装Dart插件的临时界面，点击install 

安装完重启，我们就能看到如下界面

 

到这里我们就完成了 Android SDK的配置

此时我们终端输入flutter doctor，检测flutter配置，如出现JDK问题，我们需要如下命令

$ cd /Applications/Android\\ Studio/Contents/jre

$ ln -s ../jre jdk

$ ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk

$ flutter doctor

如再次检测，出现许可证问题，如下图

我们需要如下命令解决

$ flutter doctor --android-licenses

至此，所有关于flutter的配置已经完成，已经可以进行flutter开发了