配置VS Code

  1. 安装VS Code，访问https://code.visualstudio.com/；
  2. 安装好后，安装扩展：Flutter和Dart；
  3. 选择View > Command Palette….，输入doctor，选择Run Flutter Doctor，然后查看终端中有没有异常；

image.png
image.png

  1. 终端中显示无异常。

至此，我们完成了VS Code开发Flutter的配置。接下来就创建第一个应用。

创建第一个APP

  1. 选择View > Command Palette，输入 flutter，选择 Flutter: New Project 选项；
  2. 输入APP项目名并确认；
  3. 等上一会，项目初始化就完成了，会自动打开新窗口，并先展示 main.dart 文件。main.dart中便是我们的应用的代码。于是，一个Material Design风格的简单示例APP就创建完成了。风格指引见：https://material.io/design/。

image.png

运行APP

image.png
在VS Code的最下方，我们可以看到我们连接了真实设备，就是我的开发机华为Mate10Pro。
选择Debug > Start Debugging 或者按 F5 开始调试应用。终端中显示如下，还有初始化的提示。
image.png
image.png
初始化gradle中。。。
image.png
解决依赖中。。。
第一次打开会比较久，一定要耐心等待应用程序启动，在Debug Console视图中会显示进度。应用构建完成后，就可以在设备上看到启动了的应用。
image.png
编译apk文件完成了，还能够操作。下面是APP的界面。
image.png
将main.dart代码中’You have pushed the button this many times’改为’You have clicked the button this many times’。
image.png
CTRL+S保存或热加载按钮，我们可以看到界面中的文本也更新了。
image.png
在热更新时请不要重启或者关闭你的应用。
调试模式需要更多性能，有些动画之类的东西是看不出来实际表现，所以不要在测试模式下对流畅度、性能等进行测试，可以试试文件运行的模式，就能看到发布之后的运行情况。理论上来讲，动画运行会更加流畅。
image.png
在terminal窗口运行flutter run --profile命令，会重新进行编译apk文件并重新安装，APP表现与正常安装一致，不会热更新因此性能不会受到影响。