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 这几个工具可以事先安装好。

下载

• 下载地址
  M1芯片需要选择arm64的

下载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的问题