Flutter在Windows平台下的安装配置

目录

1. 安装 Flutter SDK

2. 设置环境变量

3. Flutter doctor

4. 安装 Android Studio

5. 启动 Android Studio, 安装 Android SDK

6. 再次运行 Flutter doctor 查看依赖项

7. 设置 Android emulator8. 配置编辑器

8.1 Android Studio

8.2 Visual Studio Code (VS Code)

第一次接触移动开发, 纯小白一枚, 慢慢摸索, 记录安装.

1. 安装 Flutter SDK

如果不能直接下载 Flutter SDK, 可以通过github安装, 请参考 Using Flutter in China.

下载 Flutter SDK (flutter_windows_v0.2.8-beta.zip), 解压到指定目录, 双击运行flutter_console.bat, 完成sdk安装, 如图.

Flutter在Windows平台下的安装配置_第1张图片

 

 

Flutter在Windows平台下的安装配置_第2张图片

 

 

2. 设置环境变量

 

在Path下增加到flutter/bin的目录, 如图:

Flutter在Windows平台下的安装配置_第3张图片

 

 

3. Flutter doctor

 

在flutter控制台运行 flutter doctor 命令, 检测是否有依赖项未安装.

 

Flutter在Windows平台下的安装配置_第4张图片

 

 

其中带X的表示需要安装的东西, 如我这里需要再安装Android toolchain 与 Android Studio.

 

安装Android Studio时,会默认下载安装Android SDK,所以下一步直接安装Android Studio.

 

4. 安装 Android Studio

 

直接上图.

 

Flutter在Windows平台下的安装配置_第5张图片

 

 

全程 Next, 直到 Finish.

 

Flutter在Windows平台下的安装配置_第6张图片

 

 

5. 启动 Android Studio, 安装 Android SDK

 

Flutter在Windows平台下的安装配置_第7张图片

 

 

Flutter在Windows平台下的安装配置_第8张图片

 

 

Flutter在Windows平台下的安装配置_第9张图片

 

 

Flutter在Windows平台下的安装配置_第10张图片

 

 

Flutter在Windows平台下的安装配置_第11张图片

 

 

Flutter在Windows平台下的安装配置_第12张图片

 

 

Flutter在Windows平台下的安装配置_第13张图片

 

 

Flutter在Windows平台下的安装配置_第14张图片

 

 

6. 再次运行 Flutter doctor 查看依赖项

 

Flutter在Windows平台下的安装配置_第15张图片

 

 

还有两个依赖需要解决

 

[!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
X Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

 

运行 flutter doctor --android-licenses

 

Flutter在Windows平台下的安装配置_第16张图片

 

 

[!] Connected devices
! No devices available

 

打开手机开发者选项, 打开USB调试后, 再次检测, 成功。

 

Flutter在Windows平台下的安装配置_第17张图片

 

 

7. 设置 Android emulator

 

打开AVD Manager, 新建.

Flutter在Windows平台下的安装配置_第18张图片

 

 

随意选择一个后下一步

Flutter在Windows平台下的安装配置_第19张图片

 

 

建议选择 x86_64的 image.

Flutter在Windows平台下的安装配置_第20张图片

 

 

Flutter在Windows平台下的安装配置_第21张图片

 

 

Flutter在Windows平台下的安装配置_第22张图片

 

 

Graphics 选择 Hardware GLES 2.0

Flutter在Windows平台下的安装配置_第23张图片

 

 

8. 配置编辑器

 

这里介绍 Android Studio 与 Visual Studio Code (VS Code) 的配置.

 

8.1 Android Studio

 

安装 Flutter 和 Dart 插件. Configure->Plugins 如图

 

Flutter在Windows平台下的安装配置_第24张图片

 

 

Browse repositiories..

Flutter在Windows平台下的安装配置_第25张图片

 

 

选择 Flutter, 安装, 弹出 Dart 插件安装时, 选择是.

Flutter在Windows平台下的安装配置_第26张图片

 

 

新建 Flutter project

Flutter在Windows平台下的安装配置_第27张图片

 

 

选择 Flutter Application

Flutter在Windows平台下的安装配置_第28张图片

 

 

Next 直到 Finish, 等待新建项目的完成.

Flutter在Windows平台下的安装配置_第29张图片

 

 

选择模拟器, 调试

Flutter在Windows平台下的安装配置_第30张图片

 

 

运行结果如下:

Flutter在Windows平台下的安装配置_第31张图片

 

 

8.2 Visual Studio Code (VS Code)

 

安装 Dart Code 扩展

Flutter在Windows平台下的安装配置_第32张图片

 

 

新建 Flutter 项目

Flutter在Windows平台下的安装配置_第33张图片

 

 

Flutter在Windows平台下的安装配置_第34张图片

 

 

选择一个路径来存储项目, 注意, 路径中一定不能出现中文, 否则后面步骤会失败

Flutter在Windows平台下的安装配置_第35张图片

 

 

等待项目创建完成

Flutter在Windows平台下的安装配置_第36张图片

 

 

右下角的为上一步创建的Android emulator

Flutter在Windows平台下的安装配置_第37张图片

 

 

F5 开始调试

Flutter在Windows平台下的安装配置_第38张图片

 

 

运行结果如下.

Flutter在Windows平台下的安装配置_第39张图片

 

Flutter在Windows平台下的安装配置_第40张图片

分类: flutter

你可能感兴趣的:(H5前端开发,javascript,flutter)