如果你和我一样也是一个开发人员，你有没有遇到过下面的问题：

你打开Android Studio或者XCode进行开发，发现过不了多久机器的内存就被“吃”光了，随着程序界面的越来越复杂，运行一次程序往往要几分钟？

你只是修给了一个界面上的标签文字，就要在IDE里重新启动运行一次，才能看到显示的效果？

如果你开发过React Native应用，如果程序报错，你只看到一大堆提示错误，想要一步步的断点调试，却找不到一个趁手的工具？

现在好了，有了Flutter 和 VS Code，这些问题都有了很好的解决办法，并且可以节省你大量的时间。

在这篇文章里你将看到：

如何用一个轻量级(但是非常强大)的IDE，VSCode来开发Flutter应用。

如何应用Flutter的热重载技术，快速的查看修改代码后的程序运行效果。

如何把原来的开发调试事件缩短1/3。

接下来，让我们开始吧。

安装VS Code的Flutter插件

VS Code是微软开发的一个非常棒的IDE，它运行速度快，体积小，关键是有非常丰富的插件，帮助开发人员提高开发效率。

对于Flutter来说，VS Code也有一个非常棒的插件。在开始体验Flutter技术之前，我们先把插件装好。

打开VS Code，然后点击左侧的【Extensions】按钮，并搜索Flutter关键字，找到这个插件并安装。

安装Flutter插件

如果你用的是最新版本的VS Code 安装完插件不需要重启，马上就可以开发Flutter应用了。接下来，让我们从一个Flutter脚手架应用开始，体验Flutter技术的高效。

开始第一个Flutter应用

Flutter提供了脚手架应用，可以帮助我们快速搭建Flutter的开发框架。在VS Code 中创建一个Flutter应用的步骤如下：

打开 View下的Command Palette。或者按快捷键 Ctrl+Shift+P

在弹出的输入框中，输入 flutter

选择Flutter:New Project 来创建一个项目,如下图

创建Flutter项目

然后输入项目名称，比如 myapp

接下来就是等待了，大概几分钟后，生成的项目代码结构大概是下面这样：

Flutter项目代码结构

接下来让我们运行这个程序。

体验令人振奋的热重载技术

我在写这篇文章的时候使用了Genymotion作为Android模拟器，进行调试和开发。如果你还没有安装这个工具，可以参考这篇文章：

首先，我们打开Genymotion模拟器。然后在VS Code左侧找到【Debug】按钮，然后选择“Add Configuration”.

运行Flutter

VS Code 会智能化的帮我们创建一个运行Flutter的运行文件，launch.json，并且菜单式出现了Flutter程序运行的按钮：

运行Flutter

点击那个运行按钮，过一会就可以看到Genymotion模拟器中出现了你的第一个应用程序。

第一个Flutter

接下来到了最有意思，也是开发人员最爱的部分了，也就是Flutter提供的热重载技术(Hot Reload)。

跟着我做一些修改。我们打开项目目录下 lib/main.dart文件，找到

下面这句：

home: MyHomePage(title: 'Flutter Demo Home Page'),

然后把它改成：

home: MyHomePage(title: '我的第一个Flutter应用'),

保存一下，在看看模拟器，你会发现一眨眼间，你修改的内容已经反映在模拟器中，这期间你根本无需重新编译、重新部署，一句话“就是这么快”

第一个Flutter

总结

从上面一个简单的例子我们不能看出，Flutter不仅有丰富的IDE支持，其热重载技术无异于如虎添翼，比起传统的原生开发(虽然Android Studio也有类似的热重载技术，但是重载速度显然没有Flutter的快)和React Native开发要方面好多。

我认为，一个技术的发展尤其是前端技术，一定要有一个快速高效的框架做支持，并且必须是有很好的IDE来配合的，从Android和iPhone原生开发的工具就可以看出，工具支持的越好，其技术发展的就越快，普及度也越高。