美文网首页Flutter学习
Flutter学习--Mac 电脑安装Flutter详细教程

Flutter学习--Mac 电脑安装Flutter详细教程

作者: 文小猿666 | 来源:发表于2020-04-13 20:35 被阅读0次

    一.前言

    虽然说flutter环境搭建并不是很复杂,可能对于新手来说,或者阅读官方文档有些吃力的小伙伴来说还是会耽误点时间的,本文力求以最小白的视角来记录踩过的坑。

    二.准备

    我当前Mac 系统为 Version:10.14.6 ,
    Android Studio---Version:3.2.1,
    vscode---Version: 1.44.0,
    xcode----Version:11.0
    到官网下载flutter sdk:地址
    有Windows,macOS,Linux 三种可选下载可能会花费点时间,我当时大概下载了两个小时。下载下来是一个压缩包

    三.安装

    1.解压sdk

    压缩包解压出来是一个名为flutter的文件夹,我是在电脑根目录下创建了一个opt文件夹,然后将解压后的文件放到了opt文件里面,这个纯属个人爱好,没有特殊要求。

    2.配置环境变量

    因为Flutter 在运行的时候,需要去官方下载所需要的资源.所以我们需要更换镜像服务器。具体操作,首先执行在电脑根目录下执行vim /.bash_profile 。记住是根目录!!我当时就是在flutter和opt文件里面执行配置了很多遍一直不成功。(原谅一个iOSer,对这方面了解太少了)。

    然后在写入

    export PATH=${PATH}:/Users/wzr/opt/flutter/bin
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

    其中第一bin文件路径,根据个人而定。

    写好之后 :wq  保存退出。
    此时可能不会直接生效,我是关闭终端之后,再打开才生效的。

    3.检测

    在终端输入 flutter doctor,可以检测环境安装情况。
    我第一次执行的时候报了三个错误,好吧一个一个看。
    前面两个是Android studio相关的,在Android studio中没有安装 flutter和dart插件

    好吧,打开Android studio,在Preference->Plugins中分别搜索dart,Flutter插件下载安装就好了。

    再次在终端输入flutter doctor,不出意料,只剩下一个错误了

    根据描述可以看到是VS code中的Flutter插件没有安装好

    打开VS code ,点击左边栏倒数第二个按钮,搜索Flutter,选择第一个安装。

    再到终端执行 flutter doctor,果然,原来的三个问题都解决啦。
    不过好像还有一个警告。看下描述原来是Android licenses not accept。
    很简单上面写了解决办法 照做就行了

    执行flutter doctor --android-licenses,中间会有几个选项,都选择yes就行了

    最后在执行一遍flutter doctor,No issues found ! 大功告成。

    终于可以开始愉快(tong ku)的flutter之旅啦。

    (iOSer 表示这算是配过比较复杂的开发环境了,给自己一朵小发发🌹)!

    相关文章

      网友评论

        本文标题:Flutter学习--Mac 电脑安装Flutter详细教程

        本文链接:https://www.haomeiwen.com/subject/ttzwmhtx.html