Flutter安装实践 2022-05-12 周四

三层结构

Flutter 框架从上到下为:框架层、引擎层和嵌入层。

  • 框架层(framework):提供Widgets组件库;提供Material和Cupertino两套风格UI;Dart实现
  • 引擎层(Engine): Skia 引擎、Dart 运行时、文字排版引擎等,实现真正的绘制和显示。 C++ 实现
  • 嵌入层(Embedder):将 Flutter 引擎 ”安装“ 到特定平台上。Android 使用的是 Java 和 C++; iOS 和 macOS 使用的是 Objective-C 和 Objective-C++

安装实践

  • VPN一定要用,不然会很麻烦。

  • Visual Studio Code,XCode,Android Studio,Chrome 这几个工具可以事先安装好。

下载

下载arm64的stable版本

下载之后是个.zip文件,双击解压之后,是个flutter文件夹。

位置

  • 这个flutter文件夹放哪?其实放哪里都行。考虑到这也算一个工具,按照mac的一般习惯,直接扔到“应用程序”也是一个办法。这个地方也算比较好找。
flutter文件放置位置举例

zsh的问题

  • zsh: command not found: flutter问题:
    这是因为最新Mac以zsh为shell,需要配置文件.zprofile才能运行flutter命令。而这个文件默认是没有的,需要手动创建。执行如下两条命令:
vim ~/.zprofile
source ~/.zprofile

这个时候文件还是空的,需要输入以下内容,flutter命令才能用

export FLUTTER_HOME=/Applications/flutter
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin  

export FLUTTER_HOME=/Applications/flutter这一行与flutter目录的实际位置有关

最后用一下命令flutter -h测试一下就可以了,有内容出来就可以了。

前往->个人可以看到这个隐藏的配置文件
参考文档

zsh: command not found: flutter
Flutter笔记一之环境搭建(Mac - M1)

环境检查

通过命令flutter doctor可以检查环境是否正常

flutter环境检查

这里说明有3个问题需要解决,按照提示去做,最好做到全绿色通过

XCode配置问题

XCode是最新版本,并且一直在用。只要执行提示的两个命令,就能消除关于XCode的问题。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
Android Studio配置问题
  • Unable to locate Android SDK.
    这个是找不到Android SDK。指定一下就好了。相关命令也会告诉你
    flutter config --android-sdk /Users/zxs/WorkSpaceAndroid/SDK

  • cmdline-tools component is missing
    Android license status unknown.
    这两项是因为Android Studio的命令行工具没有安装。

Android Studio的命令行工具

安装好之后,再执行一下flutter doctor这一项就没了。

搭建Flutter环境踩坑记【MAC】

最新的Android Studio的位置
  • HTTP host "https://maven.google.com/" is not reachable.
    HTTP host "https://cloud.google.com/" is not reachable.
    这是因为墙的原因,导致Google无法访问造成的。很多网络文章通过修改flutter文件夹下的文件来绕过这个问题,感觉不是很好。
    为了这个问题,flutter提供了国内的镜像源,在配置文件 .zprofile中配置一下就可以了
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

最后的.zprofile文件大概是这样的

export FLUTTER_HOME=/Applications/flutter
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

修改了之后,需要执行一下source ~/.zprofile才能起效果

Using Flutter in China

通过检查

flutter doctor检查要求全绿通过,就像下面这样的:

通过检查

到这里,环境安装算是完成了。就像基础知识中介绍的那样,flutter是个"嵌入层",把XCode,Android Studio,Chrome,Visual Studio Code这几个工具有机地整合在了一起。

工具选择

  • 开发工具可以选择Visual Studio Code和Android Studio两种

  • 模拟器和真机可以选择Android和iOS两种

  • 这里选择的是:
    开发工具:Visual Studio Code (Dart和JavaScript很像,更像前端开发)
    模拟器:iOS (比Android模拟器好用多了)
    真机:Android(手机便宜,并且证书方面比苹果手机简单多了)

  • Visual Studio Code 插件

flutter插件

VsCode开发Flutter应用

插件推荐

其他的参考文章

Developing with Flutter on Apple Silicon
rosseta和ffi是个很令人头疼的事情

Mac m1 芯片配置FLutter
homebrew一直装不起来。貌似不装也问题不大。

MacBook M1 Flutter环境搭建的实现步骤
这个就遇到了rosseta和ffi的问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,692评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,482评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,995评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,223评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,245评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,208评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,091评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,929评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,346评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,437评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,037评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2 354

推荐阅读更多精彩内容