工作生活

Flutter环境搭建+VSCode开发(Mac篇)

2019-07-04  本文已影响0人  FogeeY

系统环境要求

安装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
这里安装flutter会顺带把Dart也安装完了。

如果之前终端运行flutter doctorVSCode还是红❌的话现在再运行应该是个绿✅了,就表示安装完成了

新建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就到这了。

上一篇下一篇

猜你喜欢

热点阅读