专栏首页林小帅的专栏Flutter 环境及配置
原创

Flutter 环境及配置

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

【Flutter 中文网】https://flutterchina.club/ 

Windows、macOS、Linux 也有不同系统安装说明

因为我使用的 Windows 系统,所以这里以 Windows 系统为例。

  • 操作系统: Windows 7 或更高版本 (64-bit)
  • 磁盘空间: 400 MB (不包括Android Studio的磁盘空间)。
  • 工具: Flutter 依赖下面这些命令行工具。
    • Git for Windows (Git命令行工具)

关于 Flutter 中文网,其中提到可以使用 Flutter 官网提供的 SDK 安装包。

注意:但我在尝试使用 Flutter SDK 的安装包来运行项目会产生错误,所以还是建议通过 GitHub 的方式将 Flutter 项目 clone 下来。

首先是将此配置加入到系统环境变量中:

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

注意:由于一些 flutter 命令需要联网获取数据,如果您是在国内访问,由于众所周知的原因,直接访问很可能不会成功。

PUB_HOSTED_URL

FLUTTER_STORAGE_BASE_URL

是 google 为国内开发者搭建的临时镜像。

详情请参考 Using Flutter in China

在完成以上配置以及从 GitHub 上 clone flutter 项目之后,再将 flutter 文件夹下 bin 目录配置到系统环境变量中。

【GitHub 地址】https://github.com/flutter/flutter

PATH=xxx\flutter\bin

这时候打开一个新的命令行窗口就可以在命令行中使用 flutter 命令了。

(点击查看大图 flutter 命令输出)

如能出现以上命令行说明,那就证明你已经正确的配置了 Flutter 环境了。

在这里我有一个不成熟的建议:

  1. 如果未出现,请回到文章开头再来一遍。
  2. 如三遍后还是未出现,请重启电脑。
  3. 如重启后再尝试三遍还无出现以上内容。

少侠我看你骨骼精奇,这本秘笈我就10……

算了,免费送你了。

我真的 ball ball 你,请珍惜生命和头发吧!!!

当然一切正常的话

这时候就可以打开 VS Code 在插件商店中输入 flutter 安装支持扩展。

安装此扩展插件后会自动安装 Dart SDK 和 相关支持扩展。

等待完成后,重启 VS Code 扩展插件就能正常工作了。

当以上步骤都能正确执行后,在命令行中输入

flutter doctor

这个命令按官方说明:第一次运行这个命令时,它会下载自己的依赖并自行编译,以后再运行时就会快很多。

但是!!有一点官方并没太详细说明,就是它会检查与之相关的 环境配置信息、相关的 SDK、以及相关 IDE 的安装环境。

  • Flutter 环境
  • Android 开发环境 以及 Android SDK
  • Visual Studio 开发工具 和 环境(非必须,有更好)
  • Android Studio IDE(非必须,有更好)
  • Connected device(连接的设备:真机 或 虚拟机)

OK,当 flutter doctor 检测没有明显的错误后,就可以考虑创建一个 flutter 项目了。

flutter create myapp

稍等一会儿,项目就创建完成了。

然后进入项目目录

cd myapp

你就可以看到项目目录结构了

这时候你就要连接 真机 or 虚拟机,然后命令行输入

flutter devices

一切正常的情况下,该命令会检查设备,并且将设备信息显示输出在命令行中。

然后,就让我们把项目跑起来吧!

flutter run

稍等一会……一会……一会……

如果一切正常,那么在设备上就会看到 flutter create 的一个 demo 了。

(flutter demo - Android)

但是!!!

很不幸,你可能大概率会报错!

别问为什么!

(由于众所周知的原因,你懂的!)

你看到的结果会是这样

首先!不要惊慌,不要害怕!把毛巾打湿捂住口鼻,压低或蹲下身子有序逃……

emmmmm……不好意思,走错片场了。

主要原因还是因为无法连上国际互联网,导致无法获取相关的包信息。

没关系,找到你 clone 的 flutter 项目文件夹,然后进入

Flutter->packages->flutter_tools->gradle 找到 flutter.gradle 文件。

将 buildscript -> repositories 下的 google()、jcenter() 两个方法进行注释。

然后添加阿里云(aliyun)提供的 maven 仓库镜像进行替换

maven{ url 'https://maven.aliyun.com/repository/google' }
maven{ url 'https://maven.aliyun.com/repository/gradle-plugin' }
maven{ url 'https://maven.aliyun.com/repository/jcenter' }
maven{ url 'https://maven.aliyun.com/repository/public' }
(替换仓库镜像)

然后再次执行 flutter run 命令就可以看到正常执行的 flutter 项目 demo 了

祝各位神仙大佬们 build 一次过。

如果尝试了很多次还是有问题,请你取关吧,我不认识你

总结:

  • 官方文档是你入门的好帮手,请务必认真阅读。
  • 认真分析和总结问题的所在。
  • 有时候重启也是可尝试的方法之一。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter 更新&升级

    https://flutter-io.cn/posts/announcing-flutter-1-7-9.html

    林小帅
  • Vue-Cli 3 使用 TypeScript 快速探索之旅

    从书写方式上,类型定义、类、抽象类、接口、构造函数、构造器、装饰器、继承等等的一系列语法糖都在向着 C#、Java 等后端语言的面向对象的编程方式发展,也拥有了...

    林小帅
  • Flutter 视图布局(二)

    在 Flutter 视图布局(一)中文章结束时留下了一个问题,大家有尝试去实现吗?

    林小帅
  • Flutter 更新&升级

    https://flutter-io.cn/posts/announcing-flutter-1-7-9.html

    林小帅
  • Flutter环境搭建

    这几年,移动跨平台的趋势可以说是越来越明显,技术实现上也是百花争艳,不过究其实现,无外乎有那么几种。 Web 流:也被称为 Hybrid 技术,它基于 Web ...

    xiangzhihong
  • linux下安装软件

    业界的软件标准安装有三步:configure,make,make install,下面是它们的定义:

    charlieroro
  • 对话美国科学家,大数据到底怎么影响我们的生活?

    大数据文摘
  • 解决IIS配置HTTPS证书后刷新消失问题

    IIS配置CER证书后完成证书申请后刷新后就会消失的这个BUG微软一直存在,因为我们一般申请都是下来的CER文件和私钥

    刺_猬
  • 对话美国科学家,大数据到底怎么影响我们的生活?

    大信息大爆炸的今天,不讨论大数据这个话题似乎就是跟不上时代。从医药到教育,再到其他各个领域,大数据充斥着现代社会的每个角落。而我们最关心的还是大数据最终将以什么...

    小莹莹
  • Flutter 环境搭建

    要获得 Flutter,请先使用 git 克隆 Flutter,然后将该 flutter 工具添加到您的用户路径。运行 flutter doctor 显示您可能...

    s_在路上

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动