Flutter 01: 图解 Windows 环境下安装配置环境

简介:       Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 同时可以与现有的代码一起工作。

      Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 同时可以与现有的代码一起工作。Flutter 已经发布很长一段时间了,有不少大神都在学习和应用,小菜认为大前端方向是趋势,也学习一下。
      Flutter 中文网 中对 Flutter 讲解非常全面,小菜也想好好学习一下,但是头一步配置环境就难倒小菜了,还真是当头一棒啊!小菜觉得官网可能觉得配置环境太简单了,所以说明的简洁明了,但对于小菜这种基础差的还真得花时间研究一下。因此小菜第一篇小博文就是整理一下在 Windows 环境下如何安装配置 Flutter 环境。

系统环境

  1. Flutter 建议 Windows 环境在 64 位 Windows7 及以上,小菜的环境是 Windows10;
  2. 磁盘空间要超过 400MB,小菜觉得现在的电脑对这些空间都是绰绰有余的;
  3. 电脑已安装 Git

安装图解

Tips: 优先处理第 5 步,可以减少很多不必要的问题!!!

  1. cmd -> git clone https://github.com/flutter/flutter.git,clone 需要一段时间,如图;
1. clone flutter
2. clone 进行中
3. clone 成功
  1. 添加用户 Path 路径:控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 环境变量,Path 变量中添加 Flutter 路径,到 \bin 级;一般是在 C:\User\Your Name\Flutter\bin,若找不到可以在磁盘中搜索一下;
  2. cmd 中运行 Flutter:flutter doctor,但是不幸报错,提示无法连接远程服务器,如图:
flutter doctor
连接失败
  1. 小菜尝试解决这个问题,于是在 cmd 中编辑:
prompt PUB_HOSTED_URL=https://pub.flutter-io.cn
prompt FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter doctor

可以下载,但是 Builde 环节出错,如图:

正在进行 ooooo...
builder 失败
  1. 第 3 步如果是有梯子的情况下正常,但小菜没有梯子,所以忽略了进门第一件重要的事,配置国内环境,在环境变量中添加用户 Path 变量:PUB_HOSTED_URL -> https://pub.flutter-io.cnFLUTTER_STORAGE_BASE_URL -> https://storage.flutter-io.cn,强烈建议优先配置这一步,会省去很多不必要的麻烦,小菜仅从自己遇到的问题顺序整理,如图;
FLUTTER_STORAGE_BASE_URL 环境变量
PUB_HOSTED_URL 环境变量
  1. 重新打开 cmd -> flutter upgrade,之后等待进行,即可顺利安装:
flutter upgrade
成功 up-to-date 最新版本
自动下载解压
  1. 电脑连接手机,打开开发者模式,打开 cmd -> flutter devices,检测是否连接设备,如图:
flutter devices

      至此,Flutter 环境安装配置成功,虽然安装配置环境是基础的基础,但当看到 "Welcome to Flutter!" 时,小菜还是有一丝说不出当自豪和欣喜。还要继续学习和研究啊!


      Flutter 是一种比较新的跨平台方式,小菜觉得很有必要学习一下,如果可以的话小菜想结合 Demo 整理一个小系列。
      小菜深刻理解到,看一百遍不如动手操作一遍,可能会遇到各种意想不到的问题,对自己也是一种挑战。


      以下是小菜公众号,欢迎闲来吐槽~


公众号.jpg
目录
相关文章
|
1月前
|
Java 开发工具 Windows
Windows环境下面启动jar包,输出的日志出现乱码的解决办法
Windows环境下面启动jar包,输出的日志出现乱码的解决办法
|
1月前
|
Unix 编译器 开发者
Qt5.14.2 轻松掌握Qt中的压缩与解压缩:QuaZIP的神秘面纱与实战演练之windows环境编译
Qt5.14.2 轻松掌握Qt中的压缩与解压缩:QuaZIP的神秘面纱与实战演练之windows环境编译
|
1月前
|
应用服务中间件 nginx Windows
windows下快速安装nginx 并配置开机自启动
windows下快速安装nginx 并配置开机自启动
windows下快速安装nginx 并配置开机自启动
|
1月前
|
算法 应用服务中间件 网络安全
windows下采用 nginx配置websocket支持wss流程
windows下采用 nginx配置websocket支持wss流程
|
1月前
|
存储 Oracle Java
windows配置java环境
windows配置java环境
43 0
|
1月前
|
弹性计算 网络安全 Apache
windows server2012服务器下PHPstudy配置ssl证书(https配置)
windows server2012服务器下PHPstudy配置ssl证书(https配置)
69 0
|
1月前
|
存储 JavaScript 开发工具
Windows 10环境下Git安装之简易指南
该指南教小白在Windows 10上安装Git,介绍Git设置的基础知识,为你的开发项目做准备!
|
2月前
|
Dart Shell 开发工具
解决windows安装Flutter时出现Unknown operating system. Cannot install Dart SDK.问题
解决windows安装Flutter时出现Unknown operating system. Cannot install Dart SDK.问题
|
2月前
|
Windows 网络安全
Windows【工具 05】使用freeSSHd搭建sftp环境(安装+配置+避坑)freeSSHd version 1.3.1安装包网盘分享
【2月更文挑战第2天】使用freeSSHd搭建sftp环境(安装+配置+避坑)freeSSHd version 1.3.1安装包网盘分享
396 0
Windows【工具 05】使用freeSSHd搭建sftp环境(安装+配置+避坑)freeSSHd version 1.3.1安装包网盘分享
|
2月前
|
消息中间件 Kafka Apache
【Kafka专栏】windows搭建Kafka环境 & 详细教程(01)
【Kafka专栏】windows搭建Kafka环境 & 详细教程(01)