Flutter基础篇 — 配置编辑器并体验

一、Visual Studio Code (VS Code) 安装

1、VS Code, 安装1.20.1或更高版本.

2、安装Flutter插件

（1）启动 VS Code

（2）调用 View>Command Palette…

（3）输入 ‘install’, 然后选择 Extensions: Install Extension action

（4）在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

（5）选择 ‘OK’ 重新启动 VS Code

二、通过Flutter Doctor验证您的设置

1、调用 View>Command Palette…

2、输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action

3、查看“OUTPUT”窗口中的输出是否有问题

三、创建新的应用

1、启动 VS Code

2、调用 View>Command Palette…

3、输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action

4、输入 Project 名称 (如myapp), 然后按回车键

5、指定放置项目的位置，然后按蓝色的确定按钮

6、等待项目创建继续，并显示main.dart文件

上述命令创建一个Flutter项目，项目名为myapp，其中包含一个使用Material 组件的简单的演示应用程序。

在项目目录中，您的应用程序的代码位于 lib/main.dart.

四、运行应用程序

1、确保在VS Code的右下角选择了目标设备

2、按 F5 键或调用Debug>Start Debugging

3、等待应用程序启动

4、如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序:

网上的图

五、体验热重载

Flutter 可以通过 热重载（hot reload） 实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态（译者语:如果是一个web开发者，那么可以认为这和webpack的热重载是一样的）。简单的对代码进行更改，然后告诉IDE或命令行工具你需要重新加载（点击reload按钮），你就会在你的设备或模拟器上看到更改。

1、用你喜欢的编辑器打开文件lib/main.dart

2、将字符串

'You have pushed the button this many times:' 更改为

'You have clicked the button this many times:'

3、不要按“停止”按钮; 让您的应用继续运行.

4、要查看您的更改，请调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (绿色圆形箭头按钮).

你会立即在运行的应用程序中看到更新的字符串。