【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

发布时间:2019-06-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

之前写了 Mac 上安装 Flutter ,鉴于有朋友提议需要一份 Windows 安装过程,所以找了一台 windows 脑补上这篇文章

在 Windows 上安装 Flutter 的过程特别简单,让我们开始吧~

本机环境

  • 系统:Windows 10 X64
  • 内存:8G

系统要求

要在 Windows 上安装 Flutter 需要满足以下条件:

  • 系统:Windows 7 或更高版本(64位)
  • 存储:不低于 400 MB

系统要求就这些,还需要安装两个工具

安装 SDK

前期工作准备完成之后,我们开始安装 Flutter

下载 SDK

flutter_windows_v0.5.1-beta.zip

通过上面链接下载 flutter v0.5.1 版本,这是目前最新的版本,如果需要下载其他版本,或者你看到这篇文章的时间稍晚,可以通过官方的 SDK 存档页下载

flutter sdk archive

下载完成后,我们解压出来得到 flutter 文件夹,这个就是我们的 SDK 了,让我们找个地方存放。我选择存放在 D:flutter

在选择存放 flutter 的目录时,有一点需要注意,就是不能选择需要权限的文件夹去存放 SDK ,这会导致一系列问题

执行批处理文件

存放完成,我们打开 flutter 文件夹,在 bin 目录(D:flutterbin) 需要一个批处理文件 flutter.bat,双击执行。

设置环境变量

让我们找到系统环境变量 PATH,点击编辑

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

选择新建,输入你的 flutter/bin 目录全路径 D:flutterbin,确定保存后,你的系统变量列表应该如下图

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

由于 flutter 有一些命令需要联网,所以我们在国内使用还需要做个简单的设置
(参考 Using Flutter in China )

我们继续设置两个环境变量

Pub_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

接下来我们打开命令行,运行命令 flutter 检查是否安装正常

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

如果你也有以上输出,恭喜你 SDK 安装完成了,万里长城踏出了第一步,值得喝杯啤酒庆祝,哈哈~

配置依赖

虽然 SDK 安装完成了,但是我们还需要安装一些别的依赖。

让我们执行 flutter doctor 它会自动帮我们做依赖检测

PS C:UsersAdministrator> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.165], locale zh-CN)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[X] Android Studio (not installed)
[!] Connected devices
    ! No devices available

! Doctor found issues in 3 categories.
PS C:UsersAdministrator>

flutter 已经给我们把问题和解决方案都列了出来.

为了写这篇文章,我特意找了一台干净的电脑,如果你的电脑以前没安装 Android SDKAndroid Studio 的话,你看到的错误信息应该和我一致.

我们按照提示来安装 Android SDKAndroid Studio ,由于安装比较简单,大家参考 Android Studio安装教程-win10-完整最新版 自行安装即可

配置编辑器

当我们把 Android SDKAndroid Studio 安装完成后,再次执行 flutter doctor,会发现还是有问题需要我们去解决

PS C:UsersAdministrator> flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.165], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Android Studio (version 3.1)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 2 categories.

Android licenses not accepted

第一个问题就是关于 Android licenses 的,flutter 也给出了解决方法,执行下面命令,然后一直输入 Y 即可

flutter doctor --android-licenses

Flutter plugin not installedDart plugin not installed

这个是提示我们 Android Studio 没有安装 Flutter 插件和 Dart 插件

让我们打开 Android Studio , 点击 Plugins,选择 browse repositories,搜索 Flutter 进行安装,在安装 flutter 时,编辑器也会帮我们安装 dart 插件

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

当我们安装完成后,让我们重启 Android Studio,完成编辑器配置

启动 Flutter

让我们重新打开 Android Studio , 选择 Start a new Flutter PRoject

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

选择 Flutter Application

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

项目名称和存储位置可以自定义

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

这一步可以输入公司或组织的名称

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

最后点击完成,项目打开的目录结构如下

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

对于这些目录结构。我们后面再讲解

我们新建项目时,Flutter 会我们生成一个 Demo App,让我们把 Demo 跑起来

配置模拟器

让我们选择 Tools > AVD Manager 来新建一个模拟器

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO


【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

选择一个设备,点击下一步

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

选择一个系统镜像,点击下载

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

等待下载安装完成,最后在设备栏中会显示出来

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

让我们选择这个设备,点击运行。等待模拟器运行

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

ok。启动了一个 Demo App,我们可以修改 main.dart 中的内容来体验 flutter 的热加载

疑难杂症

  1. emulator: ERROR: x86 emulation currently requires hardware acceleration! Please ensure Windows Hypervisor Platform (WHPX) is properly installed and usable. CPU acceleration status: HAXM is not installed on this machine

解决方案:选择 Tools > SDK Manager > SDK Tools , 安装 HAXM 即可

【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO

结束

好了,从安装到启动 DEMO ,我们都已经体验过啦~ 可以说是 flutter 的道路上我们迈出了第一步,第一步已经迈出,第一百步也不会太远啦~

这篇文章已经结束了,系列文章才刚刚开始~ 欢迎大家继续关注~

如果文章中发现了错别字,希望您能够在评论中指正~ 谢谢

交流 QQ 群:826912082
专栏:https://segmentfault.com/blog...

脚本宝典总结

以上是脚本宝典为你收集整理的【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO全部内容,希望文章能够帮你解决【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。