Flutter开发第一步-环境配置(Mac版)

背景:

我是19年底有心准备学习Flutter,各种懒散的理由拖到了今天,网上看了各种教程,官方的教程也看了几遍,也踩了一些坑,前后使用了三台电脑走了三遍流程,总结出一套个人版的安装教程(更接近于官方教程)

教程说明:

1、我的是Mac电脑。(如果你不是Mac电脑,请关闭网页。)

2、我的电脑上已经存在Xcode,已经具备了iOS开发的所有环境和配置。

3、flutter安装路径在用户下根目录Local_Dev文件夹。(如果你不喜欢使用Local_Dev这个路径,以下步骤,请及时替换相应字符)

=========教程正式开始=========

第一步:安装和配置相关的开发工具

特别说明:在官方的安装步骤中,接下来会进行flutter本地开发环境的检查,但是依据我个人的三次安装经验,我推荐大家在走到这个流程的时候开始下载安装VS Code 以及 Android Studio。好了,下面按照我自己喜欢的步骤继续进行。

5、下载VS Code并安装,拖到“应用程序”文件夹内(官方虽然慢,但我只信任官方渠道)

下载地址:https://code.visualstudio.com/ 默认Stable Build

6、在VS Code中下载安装Flutter插件,并重启。

7、下载Android Studio 并安装(傻瓜式安装)(官方虽然慢,但我只信任官方渠道)

下载地址:https://developer.android.google.cn/studio/

8、在Android Studio中安装Flutter插件,Dart插件

安装好Flutter时,会发现Dart也自动包含其中啦

9、在Android Studio中设置Flutter默认路径

10、在Android Studio中安装Android SDK Tools

11、在Android Studio中安装Android Virtual Device(模拟器)并重启

OK,到这里,你的电脑就已经在“外观”上具有了Flutter项目的开发工具和项目创建入口。

第二步:下载和配置相关的Flutter开发环境

1、下载以下安装包来获取最新的 stable Flutter SDK:

在 https://flutter.cn/docs/development/tools/sdk/releases?tab=macos下载最新的stable版本。

2、将文件解压到目标路径, 比如:Local_dev目录

新建Local_Dev文件夹,并把上面下载解压好的Flutter文件夹移如Local_Dev文件夹。

3、在终端中cd到Local_Dev目录后,输入以下命令,修改fultter环境变量

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

4、输入以下命令,预下载 iOS 和 Android 的开发二进制文件

flutter precache

OK,好了,至此,你的本地已经具有了flutter安装的基本环境和配置。接下来准备正式检查以及配置完整的Flutter开发环境

5、更新Flutter环境变量为全局环境变量:

(简单来说就是,是你在任何时候,打开“终端”都可以使用flutter开头的命令,例如以下要用到的flutter doctor 以及flutter channel等等,这个很有用。分为三个小步骤)

①:在用户根目录创建.bash_profile文件(命令行:touch $HOME/.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=/Users/webersongao/Local_Dev/flutter/bin:$PATH

③、运行以下命令来刷新当前命令行窗口

source $HOME/.bash_profile

OK,到这里,你已经在你的电脑上随时随地的使用诸如flutter help 等命令行啦。

第三步:检查和完善相关的Flutter开发环境

5、运行Flutter doctor命令,检查Flutter开发环境

flutter doctor

注意:这个命令会检查你当前的配置环境,并在命令行窗口中生成一份报告。安装 Flutter 会附带安装 Dart SDK,所以不需要再对 Dart 进行单独安装。你需要仔细阅读上述命令生成的报告,看看别漏了一些需要安装的依赖,或者需要之后执行的命令(这个会以 加粗的文本 显示出来)。

之后的部分会向你描述如果执行这些命令来完成整体的配置过程。

当你安装了任一缺失部分的依赖后,可以再次运行 flutter doctor 命令来确认是否成功安装,如此重复安装,检查,直到安装好所有依赖项。

最下面的Connected Device项,如果没有点亮也可以忽略

第四步:创建第一个Flutter项目,并检查开发环境

创建全新Flutter项目

该过程主要是为了检测本地环境是否完整配置正确,谷歌库的调用是否正常,如果长时间的停留在下面的界面,请查看文末的备注。

第五步:编译运行DiscuzQ的Flutter项目,体验Flutter的丝滑

最后,关闭电脑,大喊一声:

“Flutter牛逼”(破音~~~~~)

备注:一些常见的警告项

1、执行Flutter doctor命令时,提示android-licenses

2、打开Discuz Q项目提示“Pub get has not been run”

end !!!

暂无评论

从未想过要做一个好人,但却心存侥幸,至今做不好一个坏人!

发表评论