首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用 VS Code 上手体验 Flutter

使用 VS Code 上手体验 Flutter

作者头像
程序亦非猿
发布2019-09-17 15:17:08
1.2K0
发布2019-09-17 15:17:08
举报
文章被收录于专栏:程序亦非猿程序亦非猿

Hi,船员们好,我是体验了 VSCode 的船长。

Flutter 目前支持 Android Studio/Intellij/Visual Studio Code/终端&文本编辑器 四种方式来编写, AS 我已经非常熟悉了,为了挑战下自己(no zuo no die),学一下 VS Code,指不定以后写前端还用得着,所以综合考虑下我选择了使用 VS Code 来学习 Flutter 开发。

本文分享使用 VS Code 开发 Flutter 的初体验。

安装 Flutter 和 Dart 插件。

  1. View->Command Palette..
  2. Install -> install extensions...
  3. 搜索 Flutter 并安装
  4. 重启 VS

如图:

运行 flutter doctor:

打开 Command Palette 输入 doctor , 选择 Run Flutter Doctor :

我遇到个问题:

这个比较奇怪,我明明配置了环境变量但是还是提示我找不到,看了下 Show Log 发现跟我配置的不太对,东西少了很多,想了想可能是因为我没有配置VS 的终端,它默认用的是 bash 不是 zsh,所以没找到我配置在 zsh 的 flutter。

于是我尝试把 flutter 配置到 bash_profile ,然后发现就行了,我真 TM 是个机智鬼。

vim .bash_profile 
source .bash_profile

再执行上面的操作,运行的结果跟在终端运行 flutter doctor 是一样的。

打开最开始创建的 helloflutter 项目,执行 flutter run 就能运行起来啦!

到此 VS 的 Flutter 基本开发环境算是配置好了。

试着修改了下 lib/main.dart 文件,然后在终端输入 r ,可以看到可以立马更新到模拟器上,很是快捷。

开发初体验

创建 App

不用之前创建的工程,用 VS Code 也是可以创建工程的。

在 command palette 输入 flutter , 找到 New Project 并执行,输入工程名后会自动创建工程。

这里工程名我输入了 fluttervscode ,自动生成的项目:

然后切换到终端,执行 flutter run ,就能跑起项目来啦!(我开着 iOS 模拟器)

在 VS 右下角有个状态栏,展示了一些基本信息,也可以切换设备。

如图:

调试模式

菜单栏 Debug -> Start Debugging 可开启 Debug,初次使用会让你激活一些插件,开启即可。

当一切就绪,可以通过底部打开一个Dart DevTools的网页,展示一些 App 的信息:

可以看到展示了类似视图结构等信息,具体等以后深入了解,这里就不多写了。

此外 VSCode 还会出现个 debug 的工具栏,以帮助我们开发测试:

Hot reload

尝试修改 Demo 里的 Text 组件,command + S 保存, 这修改就能直接表现到模拟器上。(或者点击那个闪电)

(这里本来是张 Gif 图,结果裂了)

总结

这次体验只是尝试在 VS Code 上安装插件,新建 Flutter 项目,以及 Run 其 Hello Flutter 工程,还算是方便快捷,但是还是感觉 Android Studio 更加顺手 -0-。

后续如果有机会再多体验了再来分享,请保持关注。

文档:https://flutter.cn/docs/get-started/editor?tab=vscode

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-09-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序亦非猿 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装 Flutter 和 Dart 插件。
  • 开发初体验
    • 创建 App
      • 调试模式
        • Hot reload
        • 总结
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档