本文简介

搭建基于Visual Studio Code(VsCode)的Flutter开发环境.

目标用户:

Flutter初学者

操作步骤

一、下载并安装Visual Studio Code

https://code.visualstudio.com/Download

预计耗时:3分钟(按照500k/秒下载速度估计)

Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_快捷键

二、安装插件

  1. 安装插件Dart
    Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_安装插件_02
  2. 安装插件Flutter
    Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_快捷键_03

三、下载JDK8 64位

不能用最新的jdk版本,只能用jdk8 64位.

  1. 下载。预计耗时:10分钟
    https://www.cr173.com/soft/79926.html
    也可以从oracle官方下载,但是要注册oracle账号。
  2. 安装JDK并配置JAVA_HOME环境变量
    Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_android_04

四、下载Flutter SDK

  1. 下载。预计耗时:20分钟
    https://flutter.dev/docs/get-started/install
    Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_快捷键_05
  2. 解压文件并将flutter的bin目录加入到环境变量中
    Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_安装插件_06

五、接受安卓Licensse

运行如下命令,然后遇到需要的输入的地方,输入y然后回车。

flutter doctor --android-licenses

六、创建工程

  1. 完成上面步骤后,先重启一下VsCode
  2. 按下快捷键:Ctrl+Shift+p,然后输入“flutter”,选择“Flutter: New Project”
    Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_android_07
  3. 输入工程名称,然后选择存放目录(注意不要放在flutter sdk目录下)
    Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_flutter_08

七、运行工程

  1. 按F5快捷键,选择“Dart&Flutter”
    Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_环境变量_09
  2. 选择待运行设备(如果没有可运行设备,就点击“Create Android emulator”创建一个)
    Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_安装插件_10

八、运行效果图

Flutter开发入门之开发环境搭建(VSCode搭建Flutter开发环境)_android_11