Flutter 即学即用系列博客——01 环境搭建
前言
工欲善其事,必先利其器
所以第一篇我们来说说 Flutter 环境的搭建。
笔者这边使用的是 MAC 电脑,因此以 MAC 电脑的环境搭建为例。
Windows 或者 Linux 也是类似的操作。
Flutter 有英文版的官网和中文网,大家可以根据自己的喜好和情况进行选择。
点击下面的链接可以到对应的安装页面。
Flutter 官网安装链接
Flutter 中文网安装链接
我们这边以官网为例进行说明。
目录
1. 配置镜像
点击进入官网,可以看到下图:
我们点击 Using Flutter in China 进入:
可以看到主要是让我们配置镜像站点。
所以我们就将要求的两个环境变量添加到系统就可以了。
打开 terminal,看下当前用户下面是否有 bash_profile 文件,执行命令:
vi ~/.bash_profile
如果底部有
"~/.bash_profile" [New File]
说明之前没有存在过这个文件。
不管之前是否存在过该文件,我们在末尾追加上面的两个环境变量即可。
如果不熟悉 vi 操作,可以参考下面两篇文章或者额外了解。
linux Vi操作和使用方法详解
Linux vi/vim
将上面两个环境变量添加到 bash_profile 文件,文件新增的两行应该类似下面(镜像地址可能有变动,以上面官网为主,笔者此刻就是下面的):
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
接着执行命令:
source ~/.bash_profile
echo $PUB_HOSTED_URL
如果打印出了你输入的镜像,说明没有问题,设置成功了。
主要目的是追加两个环境变量,如果你习惯用文件打开,也可以打开文件后直接追加
回到安装页面,点击 macOS。
2. 获取 Flutter SDK
从图中可以看到,当前的目标是获取 Flutter SDK。
点击蓝色按钮,下载 Flutter SDK。
下载完成之后解压到自己想放置的目录(建议路径不要包含中文)。
这里假设我们将压缩包解压到的路径为 ~/flutter。
首先把下载下来的压缩包移动到 ~/flutter。
我这边下载的压缩包为flutter_macos_v1.0.0-stable.zip,执行命令
unzip flutter_macos_v1.0.0-stable.zip
执行完成之后可以看到当前目录多了一个 flutter 文件夹。
接下来就是要把 flutter 设置到环境变量以便在任何地方都可以执行 flutter 命令。
执行如下命令:
cd flutter/
pwd
控制窗口会打印 flutter 根目录。我这边为/Users/nesger/flutter/flutter。
跟上面设置两个环境变量操作类似,首先打开文件~/.bash_profile。
添加下面语句:
export FLUTTER_ROOT=/Users/nesger/flutter/flutter
export PATH=$FLUTTER_ROOT/bin:$PATH
这里定义了 flutter 根目录并将其下面的 bin 目录设置到 PATH 里面。
保存退出后执行
source ~/.bash_profile
NOTE:执行该命令后你当前窗口和新开的窗口就都可以直接运行 flutter 命令了。但是之前开的窗口就不可以了。如果需要之前的窗口也可以,就需要在对应窗口执行上面的 source ~/.bash_profile 命令
3. 执行 flutter doctor 完善相关工具链
运行
flutter doctor
会打印 flutter 需要的工具链是否完善。(NOTE: 这个命令后面会多次用到)
可以看出一些端倪。
显示一些警告。
按照上面提示进行处理即可。
举个例子:
✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
这边说 Android licenses 没有 accepted,执行
flutter doctor --android-licenses
然后不断点击 y 表示同意就可以了。
我们运行之后,再使用
flutter doctor
可以看到已经修复了
接下来就是 iOS toolchain 以及 Android Studio 两个插件的安装。
对于 Android 开发来说,其实 iOS toolchain 不修复也没问题。
我们先修复 flutter 插件安装。
NOTE:Android Studio 版本需要 3.0 或者更高版本,不然会有坑,这边为了演示一下坑及遇到的解决方法。所以这边先用版本 2.3.3 进行演示。读者最好先升级版本到 3.0。步骤是一样的。
第一步:Android Studio->Preferences
第二步:点击左侧 Plugins
第三步:输入 flutter,点击 Search in repositories
第四步:点击 Install
第五步:dart 一起安装
安装完成之后重启 Android Studio,然后在终端执行命令
flutter doctor
可以看到 Flutter 插件安装好了,只不过这里提示版本不够新。
如果你的 Android Studio 版本为 3.0 或者更高,就不会报错,那么可以忽略下面的修复步骤。
修复步骤:
重启 Android Studio 并没有看到直接创建 Flutter 项目。
笔者这边 Android Studio 版本为 2.3.3。
而 Flutter 需要 Android Studio 3.0 或者更高版本支持。
这边更新 Android Studio 之后重启。
可以看到执行 flutter doctor 命令之后 Android Studio 确实是 3.3 版本了。
但是 Flutter 依然不是最新的,需要到 plugins 去更新。
此外,还需要更新 dart。
更新完之后就可以看到创建 Flutter 项目了。
到了这里基本上对于 Android 开发的你来说环境搭建就完成了。
4. 扩展
可以看到上面有个 iOS toolchain,基于下面几点,我想修复这个。
- 我的机器安装了 Xcode。
- 刚接触 Flutter,想多点尝试,也想看看 Flutter 代码在 iOS 运行效果。
- 听说 iOS 开发都用模拟器,想体验下 iOS 模拟器。
Android 的模拟器大家都懂,反正我大部分是用真机调试。
所以按照上面的提示,Xcode 完全安装以及运行相应命令。
但是遇到了一个坑,就是依然报错。
所以我直接将提示的命令一步执行,结果可以了。
在 GitHub 上面还帮助到了一个 iOS 开发者。
flutter doctor 提示 iOS toolchain 有些错误
更多环境搭建问题和解决方案大家都可以提 issue 哦~
也许别人刚好就解决了你遇到的问题
Flutter Issue 集合
Flutter 即学即用系列博客——01 环境搭建的更多相关文章
- Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget
前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...
- Flutter 即学即用系列博客——04 Flutter UI 初窥
前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...
- Flutter 即学即用系列博客——09 EventChannel 实现原生与 Flutter 通信(一)
前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生 ...
- Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信
背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么 ...
- Flutter 即学即用系列博客——06 超实用 Widget 集锦
本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...
- Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...
- Flutter 即学即用系列博客总结篇
前言 迟到的总结篇,其实大家看我之前发的系列博客最后一篇,发文时间是 3 月 29 日.距离现在快两个月了. 主要是因为有很多事情在忙,所以这篇就耽搁了. 今天终于可以跟大家会面了. 系列博客背景 F ...
- Flutter 即学即用系列博客——09 MethodChannel 实现原生与 Flutter 通信(二)
前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 Meth ...
- Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明
前言 上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC ...
随机推荐
- Java IO基础总结
Java中使用IO(输入输出)来读取和写入,读写设备上的数据.硬盘文件.内存.键盘......,根据数据的走向可分为输入流和输出流,这个走向是以内存为基准的,即往内存中读数据是输入流,从内存中往外写是 ...
- 我珍藏的神兵利器 - 效率工具for Win[转]
工欲善其事必先利其器. 我一直都在不断挑选和优化自己的兵器,以追求着最高效率. 此篇分享下我的私家珍藏的各种神兵利器.如果有朋友能推荐更好的,那就不枉此篇. 分为Windows软件和开发工具两 ...
- Linux时间子系统之(十六):clockevent
专题文档汇总目录 Notes:介绍struct clocke_event_device及其功能feature.模式:触发event接口clockevents_program_event:clockev ...
- 关于原生js中bind函数的实现
今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下, if (!Function.prototype.bind) { Function.prototype.bin ...
- Android 框架练成 教你打造高效的图片加载框架
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41874561,本文出自:[张鸿洋的博客] 1.概述 优秀的图片加载框架不要太多, ...
- kafka 三个配置文件
kafka的配置分为 broker.producter.consumer三个不同的配置 一 BROKER 的全局配置 最为核心的三个配置 broker.id.log.dir.zookeeper.c ...
- springboot mybatis 多数据源配置
首先导入mybatis等包,这里就不多说. 下面是配置多数据源和mybatis,每个数据源对应一套mybatis模板 数据源1: package com.aaaaaaa.config.datasour ...
- Netty自定义协议解析原理与应用
目前,大家都选择Netty做为游戏服务器框架网络通信的框架,而且目前也有很多优秀的产品是基于Netty开发的.它的稳定性,易用性和高效率性已得到广泛的认同.在游戏服务器开发中,选择netty一般就意味 ...
- 使用Java实现二叉树的添加,删除,获取以及遍历
一段来自百度百科的对二叉树的解释: 在计算机科学中,二叉树是每个结点最多有两个子树的树结构.通常子树被称作“左子树”(left subtree)和“右子树”(right subtree).二叉树常被用 ...
- k8s实践 - 如何优雅地给kong网关配置证书和插件。
前言 从去年上半年微服务项目上线以来,一直使用kong作为微服务API网关,整个项目完全部署于k8s,一路走来,对于k8s,对于kong,经历了一个从无到有,从0到1的过程,也遇到过了一些坎坷,今天准 ...