美文网首页工作生活
Flutter环境搭建+VSCode开发(Mac篇)

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

作者: FogeeY | 来源:发表于2019-07-04 16:19 被阅读0次

    系统环境要求

    • 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
    这里安装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就到这了。

    相关文章

      网友评论

        本文标题:Flutter环境搭建+VSCode开发(Mac篇)

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