Flutter安装步骤【详细版】for MacOS

前言:本文仅供学习,拒绝转载!

本文只是按照Flutter中文网的安装教程中具体实现步骤所做的记录,因为有些太详细的东西Flutter中文网并没做过多的解释,所以在此做一个详细的教程,便于以后再次安装省时省事。

Step 1: 下载安装包,配置环境变量

第一步肯定就是获取安装包了,建议是通过去flutter官网下载其最新稳定的安装包,转到下载页 ,下载速度取决于自身网速。

ps: 稳定安装包通过选择Stable channel (macOS)通道里面的最新版本下载即可,如果不是为了尝鲜flutter最新的功能或者API的话,个人建议是下载稳定的版本,毕竟bate版这个玄之又玄的东西,新手不建议使用。

安装包

下载完成之后,就是上面这个Zip格式的压缩文件,然后把这个文件解压到你想要安装的目录中去,下面这个步骤官网是通过终端命令的方式去解压缩。

cd ~/development
unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip

具体怎么做呢?请看分解动作 敲黑板划重点!!!

目录结构.png

可以看到我自己本机的路径是在:本地磁盘->用户->当前管理员用户->资源库(Library)->Flutter,这个Flutter就是我自己创建的安装目标路径。
打开终端 cd到对应目录(Mac打开terminal默认的路径是在当前用户的文件夹下,所以直接指向cd到目标路径即可)

cd Library/Flutter

然后执行下面的命令解压缩我们下载下来的zip文件即可,也可以手动解压缩放到对应的目录下面

unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip

至此已经是安装初步完成,但是还是需要验证是否安装成功
注意:在验证是否安装成功之前,需要先配置一个临时的环境变量,只会在当前命令窗口生效
执行以下命令行

export PATH=`pwd`/flutter/bin:$PATH

(以上设置只是设置了临时环境变量,并不是说Flutter的环境变量就此设置完毕)
如果没有报错即为配置完成,然后运行 flutter doctor

flutter doctor

可以看到我本机的Flutter已经安装完毕


输出结果.png

随之一起输出的还有各个开发环境的配置情况

环境配置情况.png

Step 2: IDE配置,Xcode & Android Studio & VS Code

一步一步来吧,因为我自己是iOS开发,所以就从熟悉的Xcode开始,可以看到原因是因为macOS 缺失的软件包的管理器造成的,安装方法也很简单,直接执行以下命令即可
ps: brew的官网里面有此插件的介绍,感兴趣的可以看一下

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

经过一次暂停需要手动敲击任何按键进行继续安装,之后输入本机电脑密码之后,安装完成。


安装brew成功.png

之后继续运行 flutter doctor 查看配置信息

flutter doctor

配置信息.png

可以看到iOS的环境依旧是感叹号,三个原因:

  • 一个原因是brew没有进行初始化操作
  • 另一个原因就是ios-deploy not installed.
  • 最后一个原因是cocoapods与flutter的依赖关系造成的,具体可以参考https://flutter.dev/platform-plugins

OK,那么先按照提示执行pod setup操作,众所周知这个pod setup是一个比较漫长的过程,喝杯茶等一下吧。
其实我自己的pod是安装过的,可能是版本太低,或者配置不正确的原因造成的,我查看了一下pod --version,发现我的版本号并不低,那就可能是依赖关系,或者配置造成的原因,具体原因有待深究,小伙伴可以留言一起探讨

pod setup

pod操作.png

pod setup之后,顺便执行一下 检查更新

sudo gem install cocoapods

然后再次执行 pod --version 查看pod版本号,发现已经更新到最新的1.7.1的版本

pod version.png

然后处理第二个问题,按照提示依次执行命令行

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy

iOS适配结果.png

可以看到到此为止iOS环境算是已经处理完毕。接下来处理Android环境,Android的IDE我这里下载的是Android Studio,也可以用VS Code 、IntelliJ等,这里推荐VS Code或者Android Studio(Android Studio基于IntelliJ 的,但是我并没有用过此IDE..)
下载Android Studio和VS Code等工作在这里不做赘述了,我自己从Android Studio官网下载了安装包之后,直接安装完毕,什么环境变量都没有配置,包括JDK都没有下载,用到再说吧...
首先安装完成Android Studio之后,需要安装Flutter插件和Dart插件
安装插件.png

进入插件页面,搜索Flutter并点击安装
安装Flutter插件.png

安装完成之后重启Android Studio之后,一定要重启 Android Studio之后才会生效,进行flutter doctor验证Android环境情况。

flutter doctor

需同意协议.png

执行以下命令,并在暂停之后输入Y 同意协议并继续进行。

flutter doctor --android-licenses

image.png

至此Android环境也已经配置完毕,下面是最后的安装情况。
最终结果.png

VS Code 的安装配置比较简单部分比较简单,暂时不做介绍了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 背景 前两天在安装flutter的开发环境,搞了挺久,踩了一些坑,所以写出来做个总结,希望有意愿学习flutter...
    LK2917阅读 5,135评论 0 4
  • flutter 作为Dart在移动端的一个跨平台SDK,它可以在Windows,macOS,Lunux中安装使用,...
    Show_Perry阅读 4,640评论 0 3
  • 环境:python3.6需要用到的库:requests;json;os;multiprocessing通过使用开发...
    奕剑听雨阅读 5,609评论 2 0
  • 晚上看了小橘子竞选学生会的一直播,感恩身边有这么优秀的人。虽然小橘子说自己大学以前很内向,但是首次一直播...
    小小小_燕子阅读 656评论 1 0
  • 分院:大数据工程学院 班级:17移动专班 姓名:任玉霞 春天来了, 伴随着如烟,如雾,如纱的细雨。 它浇灌着万物,...
    物17移动专班阅读 1,534评论 0 0