Flutter学习第一篇之Mac环境搭建

最新推荐文章于 2024-04-30 18:15:29 发布

Gerry_Liang

最新推荐文章于 2024-04-30 18:15:29 发布

阅读量419

点赞数 1

分类专栏： Flutter

本文链接：https://blog.csdn.net/LosingCarryJie/article/details/105764831

版权

Flutter 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

1 Windows系统开发的同学可以去看Windows安装教程
2 目标读者是对跨平台开发感兴趣Android开发者

文章目录

1 下载Flutter SDK

SDK下载有两种方式，第一是下载zip文件夹，第二是直接克隆flutter官方项目，任选其一都可以下载sdk,条件不错的同学建议使用第二种方式。

1.1 download Zip 国内网络支持

跳转到Flutter Sdk下载页下载指定版本的sdk
在这里插入图片描述
这里注意下选择"macOS"，千万不要mac电脑下载了windows的sdk,否则下载之后是无法使用的,博主第一次配置的时候因为默认选择了windows导致一直环境变量配置不成功，最后发现原来是sdk 系统下载错了，大家一定注意。

至于下载到哪里，我的建议是下载到“文档"中，就像下面这样,左边的zip文件是下载下来的源文件，解压之后就会自动生成一个名为 "flutter"的文件夹了，注意这里不要给文件夹重命名，保持这个flutter命名即可，后续还有用。
在这里插入图片描述

1.2 clone flutter 需要国外网络支持

文件目录要和1.1相同

git clone https://github.com/flutter/flutter.git

liangchaojie@Liangchaojies-Mac-Pro Documents % git clone https://github.com/flutter/flutter.git
Cloning into 'flutter'...
remote: Enumerating objects: 16, done.
remote: Counting objects: 100% (16/16), done.
remote: Compressing objects: 100% (14/14), done.
remote: Total 280586 (delta 1), reused 3 (delta 0), pack-reused 280570
Receiving objects: 100% (280586/280586), 122.81 MiB | 2.52 MiB/s, done.
Resolving deltas: 100% (217122/217122), done.
Checking out files: 100% (5182/5182), done.
liangchaojie@Liangchaojies-Mac-Pro Documents %

好处是flutter sdk最新的代码可以和本地实时更新,可以把Flutter当做是一个仓库，每一个版本都可以使用Git来管理。
在这里插入图片描述

2 配置全局环境变量

这个步骤就是最头疼的步骤了，问题很多，我们慢慢解决。

打开Terminal开始敲代码

创建.bash_profile文件

open .bash_profile  

 如果报错 The file /Users/liangchaojie/.bash_profile does not exist.
 说明你的.bash_profile文件没有被创建过你需要再执行以下

touch .bash_profile   //创建.bash_profile文件

open .bash_profile   //创建完成之后再次打开  .bash_profile文件

如果没有错误信息的话你会打开一个文件，这里就是配置文件啦，将下面代码放进文件内

export PUB_HOSTED_URL=https://pub.flutter-io.cn 
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

PATH_TO_FLUTTER_GIT_DIRECTORY是你的flutter文件下载地址，请改成你自己的地址。还记得我们下载的文件目录吗?改成自己的路径即可，可以参考下图。

在这里插入图片描述

你的电脑Terminal执行的是bash命令还是zsh命令？

如果你不知道是什么命令的话，随意打开一个Terminal输入自己名字拼音
在这里插入图片描述
左边出现了一个zsh,就说明你的电脑是zsh命令，出现bash就说明你的电脑是bash命令。

如果你的电脑是bash命令的话，直接去看 3 运行flutter doctor检查环境，无需看zsh命令配置
如果你的电脑是zsh命令的话，请接着看下去
在这里插入图片描述
打开的文件中增加一句 source ~/.bash_profile

3 运行flutter doctor检查配置是否成功

经过以上两个步骤之后,请重启终端Terminal才能生效，运行以下命令

flutter doctor

在这里插入图片描述
这里面有四个红框，必须至少四个绿色的对勾，flutter才可以运行。

第一个表示的是flutter sdk安装，一般没问题
第二个问题最多，表示的是Android toolChain工具链（当初配置也是在这里浪费了很多时间）这个要是失败的话请在下面给我留言，解决办法要牵扯到Android Studio里面的一些配置，我准备放到下一篇博客去讲。
第三个表示成功安装了Android Studio
第四个就是你电脑连接了一款可以调试的测试机。

至此为止，环境搭建就可以算是success啦，让我们准备开始下一篇博客的学习吧。