Flutter 学习记1 - Mac 下的安装配置

Flutter 介绍

下载 flutter

执行 open -e .bash_profile,配置变量,以使用中国镜像

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

然后克隆项目

git clone https://github.com/flutter/flutter.git

结果报错了

error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54

网上搜到一篇文章安装cocoapods遇到error: RPC failed; curl 56 SSLRead() return error -36问题,不知道是否能解决,因为我没有用,还是老老实实按文档要求的那样,克隆 beta 分支了

git clone -b beta https://github.com/flutter/flutter.git

然后就成功了,我又创建了 master 分支并跟踪远程的 master,数据也拉下来了,没有报错。

然后再次打开 .bash_profile 文件,添加

export PATH=${PATH}:/Users/silas/Own/Library/flutter/bin:$PATH

执行

$ source $HOME/.bash_profile
$ cd flutter
$ flutter doctor

有些提示,安照说明的方法一步一步解决。当然有些东西可能不用理它,但我还是全给它解决了,再次执行 flutter doctor 显示

flutter_doctor_success.png

Android 和 iOS 上运行项目

打开 Android Studio,下载 Flutter 插件,Dart 插件也被自动装上了。重启后 File -> New -> New Flutter ProjectFlutter SDK path 就选择之前安装 flutter 的路径,Project name 和之前 Android 项目稍有不同,不能有大写字母。

工程自动打开了一个文件 main.dart,点击运行,这是在我 Nexus 5X 上的效果

Screenshot_20180402-232617.png

Screenshot_20180402-232634.png

关于大小问题,因为预装了许多环境,可以阅读Java、Kotlin、RN、Flutter 开发出来的 App 大小,你了解过吗?

现在代码还看不太懂,按文档说明,找到代码里的 'You have pushed the button this many times:' 改成 '~你点了很多次按钮~',然后 cmd-s 保存或点击右边黄色闪电图标执行 Hot Reload,可是 cmd-s 没反应,黄色按钮是灰色不可点击,然后发现和我的手机动不动就 Lost Connection,可以执行 flutter devices 查看当前有几台设备连接着。重试了下可以了,是我数据线不够好吗?然后不知怎了,无响应了,囧~

Screenshot_20180402-234549.png

因为是跨平台的,我插上我的 iPhone 6S Plus,装是装上了,但是最后总是 Error connecting to the service protocol: WebSocketChannelException: WebSocketChannelException: HttpException: , uri = http://127.0.0.1:8100/ws,也无法热加载。

执行 open -a Simulator 打开 iPhone X 的模拟器,什么问题都没有,也能热加载。看下文档,真机运行还要做些配置:

  1. 在 Flutter 项目目录中的终端中执行 open ios/Runner.xcworkspace 来打开项目默认的 Xcode 工作空间
  2. 点击选中左侧的 Runner,在 General > Signing > Team 中选中账号

Snipaste_2018-04-03_08-04-30.png

具体信息参照 https://flutter.io/setup-macos/#deploy-to-ios-devices

然后在设备管理中信任应用。结果还是同样的毛病,走了无数的弯路后偶然发现,iPhone 一插上电脑 wifi 图标就没了,然后我把 Mac 的 wifi 关闭,再插上 iPhone,wifi 图标就不会消失了,然后就可以热加载了。

IMG_2854.png

IMG_2853.png

环境大功告成,下面开始正式进入 Flutter 的世界,主要根据官网文档来学习。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏jeremy的技术点滴

微信小程序上手

74360
来自专栏PHP实战技术

ThinkPHP3.2.3集成微信分享JS-SDK实践

在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片

41080
来自专栏黑泽君的专栏

day49_BOS项目_01

其余步骤参考如下链接: https://www.cnblogs.com/chenmingjun/p/9513143.html#_label0 右键项目 -->...

11920
来自专栏Jerry的SAP技术分享

小技巧:如何突破某些网站只能登陆后才能进行文字拷贝的限制

我写公众号文章时,经常需要从一些网站的文章上查阅一些资料。比如我想把这个网页上的一个标题“SAP Fiori 2.0用户体验设计概念获红点大奖”进行拷贝。

13230
来自专栏PHP在线

高并发系统中的常见问题

本文一共分析了三个案例,分别介绍并发系统中的共享资源并发访问、计算型密集型任务缓存访问 、单一热点资源峰值流量问题和解决方案。 Q1:订票系统,某车次只有一张火...

36190
来自专栏美丽应用

Linux Deploy:部署图形界面环境

70010
来自专栏Fundebug

Vue UI:Vue开发者必不可少的工具

随着最新的稳定版本Vue CLI 3即将发布,是时候来看看有什么新鲜有趣的特性了。基于整个Vue.js开发者社区的反馈而大幅度改良,该版本提供了很多以工作流为中...

24150
来自专栏为数不多的Android技巧

mac下自动切换输入法

长久以来,输入法一直是困扰mac用户的一个问题;不过随着国内厂商的跟进,这种状况得到了极大的改善。不用自己去折腾什么鼠须管了,狼厂和企鹅都做的不错。

61810
来自专栏北京马哥教育

手把手教你搭建一个学习Python好看的 Jupyter 环境

又到摆脱重复工作,换个心情,然而并没有软用的时间了。这次,教大家如何搭建一个好看的jupyter环境。 安装Jupyter 先来展示一下我的环境 python...

52890
来自专栏企鹅号快讯

雅虎前端优化的35条军规

问题:我怎么才能收到你们公众号平台的推送文章呢? 内容部分 1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各...

39350

扫码关注云+社区

领取腾讯云代金券