Flutter 学习之搭建环境

Posted 2022-05-18 bug樱樱

拥抱变化，这是学习 Flutter 的第一篇文章，希望通过写文章的方式让自己学习下去。下面以 MacOS 为例，说说 Flutter 的环境搭建过程。

准备

Flutter 的底层不同于 android,它有自己的一套 SDK,所以第一步就得下载 Flutter 的 SDK

Flutter SDK 中文官网下载链接

Flutter SDK 官网下载链接

也可以直接通过 git 方式下载稳定版的 SDK

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

配置环境变量

SDK 下载完后，接下来我们就需要配置 SDK 的环境变量

1. iTerm 上面执行下面命令，打开 zshrc

open .zshrc

2. 添加 SDK 环境到 zshrc

比如我的 SDK 放在 /Users/xxx/Flutter/SDK/flutter,在 zshrc 里面增加下面这行命令

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

[PATH_OF_FLUTTER_GIT_DIRECTORY] 替换为对应的 SDK 放置路径，比如我这里是 export PATH=“$PATH:/Users/xxx/Flutter/SDK/flutter/bin”

3. 更新 zshrc

source $HOME/.zshrc

4. 检查配置是否成功

执行上面命令后，看 PATH 是否配置成功通过

echo $PATH 

5. 验证 flutter 是否可用

which flutter
flutter --version

输出 Flutter SDK 的路径代表可用。

检查依赖

在写 Flutter 之前，flutter 给我们提供了命令检查我们当前环境依赖是否齐全，通过下面命令

flutter doctor

执行完后，它会生成一个报告，告诉我们哪些是我们欠缺的。比如

• Android Studio （包括 Android SDK，JDK）
• Intellij IDEA(开发工具)
• XCode（版本 >= 13）
• Chrome 浏览器

我这里遇到了

AndroidStudio 部分问题

cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

Flutter 需要 Android SDK 的命令行工具，这个解决办法就是在 Android Studio 下载安装就好了

还以问题就是同意 Andorid 许可证明，上面的安装完后执行下面命令,然后一路输入 y 同意所有许可证就好了

flutter doctor --android-licenses

XCode 部分问题

! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the ios and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

升级 XCode 版本到 13 以上,并且 Mac 版本需要是 v12 以上。XCode 可以在 App Store里面更新，也可以通过XCode 下载地址下载更快。同时里面还可以下载 Command Line Tools for Xcode 。接着执行下面命令来配置 Xcode 命令行工具使用新安装的 Xcode 版本。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

接着运行XCode或者执行下面命令同意 XCode 的许可协议

sudo xcodebuild -license

接着安装 CocoaPods，它用于获取 iOS 和 macOS 平台端的插件，在 Dart 端响应您的插件使用的代码。如果没有 CocoaPods，插件将无法在 iOS 或 macOS 上运行。执行下面 2 条命令来安装

sudo gem uninstall cocoapods

sudo gem install -n /usr/local/bin cocoapods

Http 部分问题

HTTP Host Availability
    ✗ HTTP host https://maven.google.com/ is not reachable. Reason: An error
      occurred while checking the HTTP host: Operation timed out
    ✗ HTTP host https://cloud.google.com/ is not reachable. Reason: An error
      occurred while checking the HTTP host: Operation timed out

这个由于国内网络问题，导致 maven.google.com/ 无法访问，需要在flutter sdk 里面的 flutter/packages/flutter_tools/lib/src/http_host_validator.dart 里面的

const List<String> androidRequiredHttpHosts = <String>[
  'https://maven.google.com/',
];

替换为

const List<String> androidRequiredHttpHosts = <String>[
  'https://dl.google.com/dl/android/maven2/',
];

然后删除 flutter\\bin\\cache 目录里面的 flutter_tools.snapshot 文件，重启命令窗口重新检测就会发现已解决即可

至于 cloud.google.com ，暂时没有找到替换的方案，后面用到了再解决。

创建一个项目

方式1：通过命令的方式创建

进入到自己指定的工作目录执行下面命令创建

flutter create my_flutter_app

创建好后，我们可以通过 Intellij 打开该项目，如果要跑起来，打开模拟器或者连接真机调试，执行下面命令就可以跑起来了

cd my_flutter_app
flutter run

方式2：通过 Intellij 来创建

这种方式需要先安装 flutter 插件，要不然创建项目的时候没得选 flutter。

重启 IDEA 就可以创建项目了，接下来就是基本操作了

选择 Flutter 创建，然后配置项目基本信息就创建完了。

接着我们就可以在 Intellij 里面启动一个 Android 模拟器，在 XCode 里面启动一个模拟器把项目跑起来。跑起来效果

至此，环境搭建完成。