Flutter环境搭建+VSCode开发(Mac篇)
系统环境要求
- MacOS (64-bit)
- 磁盘空间:大于700M,如果算上Android Studio等编辑工具,尽量大于3G。
- 命令号工具:bash、mkdir、rm、git、curl、unzip、which、brew 这些命令在都可以使用。
安装brew:https://segmentfault.com/a/1190000013317511
下载Flutter SDK包
官网网址:https://flutter.io/setup-macos/
配置环境变量
压缩包下载好以后,找个位置进行解压。这个位置很重要,因为下面配置环境变量的时候要用到。比如你配置到了根目录下的app文件夹。
1.打开终端工具(这个我就不用写了吧),使用vim进行配置环境变量,命令如下:
vim ~/.bash_profile
在打开的文件里增加一行代码,意思是配置flutter命令在任何地方都可以使用。
export PATH=/app/flutter/bin:$PATH
提示:这行命令你要根据你把压缩包解压的位置来进行编写,写的是你的路径,很有可能不跟文章一样。
配置完成后,需要用source命令重新加载一下 ,具体命令如下:
source ~/.bash_profile
完成这部以后,就算我们flutter的安装工作完成了,但是这还不能进行开发。可以使用命令来检测一下,是否安装完成了。
flutter -h
出现下面的结果,说明到目前为止,我们安装一切顺利。
检查开发环境
到上边为止,我们安装好了Flutter,但是还不具备开发环境。开发还需要很多软件和插件的支持,那到底需要哪些插件和软件那?我们可以使用Flutter为我们提供的命令来进行检查:
flutter doctor
执行完目录会显示详细信息,红色✘表示缺失的配置,在这之前我已经安装了AS和VSCode;
image.png
使用IDE编写helloword
这里AS和VSCode都可以,VSCode更轻量级,接下来也用VSCode做演示
VSCode下载点这里
想看中文的点这里下载语言包
下载安装完VSCode以后,打开软件,安装flutter插件,如图依次操作选择flutter点击install安装就好了,很快,几秒搞定,这里我也是已经安装过了哈哈哈
这里安装flutter会顺带把Dart也安装完了。
如果之前终端运行flutter doctor
VSCode还是红❌的话现在再运行应该是个绿✅了,就表示安装完成了
新建Flutter项目
两种方法:
1、在终端中可以使用flutter create
2、在VSCode中打开命令面板⌘+⇧+P 输入Flutter: New Project执行
运行Flutter项目
也是两种方法:
1、Debug->Start Debugging(F5)
2、在命令面板⌘+⇧+P运行Debug:Select and Start Debugging执行->选择添加配置->选择Dart&Flutter,这样就不用每次都选调试环境了。
hot reload
save(cmd+s)
或者点击绿色圆形箭头按钮
选择调试设备
在界面右下角可以选择设备 image.png或者命令面板 运行Flutter: Select Devices
我是选择了苹果模拟器,运行你创建的demo就可以看到运行效果了
image.png
在mac上搭建flutter环境并编写helloworld就到这了。