专栏首页三流程序员的挣扎Flutter 学习记1 - Mac 下的安装配置

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 条评论
登录 后参与评论

相关文章

  • Flutter 学习笔记 08 - 添加资源和图片

    Flutter 可以包含 assets,asset 是打包到程序安装包中的,可在运行时访问。常见类型的 asset 包括静态数据(比如 JSON 文件),配置文...

    七适散人
  • Flutter 学习记3 - Widget 框架

    通过 widgets 构建 UI,描述当前的配置和状态,当状态改变时,框架找出前后的变化,以确定底层 Render Tree 要做的最小更改,在内部变成另一个状...

    七适散人
  • Android 透明状态栏(伪沉浸式)

    而由于 Android API 的不同,需要考虑 4.4、5.0、6.0 前后的不同。

    七适散人
  • Flutter环境搭建

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

    xiangzhihong
  • Snova架构篇(一):Greenplum MPP核心架构

    参考文章:https://doc.huodongjia.com/detail-3839.html Hashdata 简丽荣

    snova-最佳实践
  • 微信,我小鸡忍你很久了…… | 开发

    知晓君
  • 如何选研究题目?

    本着一贯的开放原则,我把这篇文章同时发布到网络上。欢迎有需要的高年级本科生或低年级研究生同学一起阅读。

    王树义
  • Flutter从配置安装到填坑指南详解

    用户1269200
  • PHP-Beanstalkd消息队列 延迟队列的搭建使用

    sinnoo
  • 原 荐 JS数组追加数组采用push.app

    HT_hightopo

扫码关注云+社区

领取腾讯云代金券