Flutter 初探及开发环境配置

Flutter 的环境安装配置比较友好，也有清晰的中文文档，没什么坑，很顺利地把环境搭建起来了，这里记录 Mac 电脑搭建 iOS 开发环境的安装和配置过程。

设置 Flutter 镜像

https://docs.flutter.cn/community/china

加入环境变量：

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

编辑器创建项目

安装编辑器：

XCode
VSCode + Flutter 插件（官方文档推荐）

打开命令面板，搜索 Flutter: New Project 可创建项目。

创建项目后，首次会提示下载 SDK，下载完后会提示加入到 PATH 中。把路径复制出来，加入环境变量：

export PATH="/Users/hbm/libs/flutter:$PATH"

然后重新使用 Flutter: New Project 创建项目。

IOS 环境配置

https://docs.flutter.cn/get-started/install/macos/mobile-ios#configure-your-target-ios-device

XCode 运行模拟器，运行后在 Xcode 中就能选择这个模拟器设备了。

open -a Simulator

编辑器运行可以选择模拟器或真机。

需配置真机部署：

需要先通过 XCode 打开项目，可通过 open ios/Runner.xcworkspace 快速打开
在 XCode 中配置真机设备部署，通过数据线连接真机，设置信任电脑
需要到 XCode 登录后，再到 iPhone 开启开发者模式
需要选择团队为 Personal Team ，选择后会进行自动签名、启用开发者证书等
设备配置完善后，点击运行即可将程序运行到真机设备
需要运行应用网络权限和查找本地设备权限
真机联通后，后续可以使用 wifi 无线调试

真机执行过程中，如果遇到报错"无法打开xxx,因为无法验证开发者"，到 flutter sdk 安装目录找到对应软件赋予权限：

sudo xattr -d com.apple.quarantine ~/develop/flutter/bin/cache/artifacts/libusbmuxd/iproxy
sudo xattr -d com.apple.quarantine ~/develop/flutter/bin/cache/artifacts/libimobiledevice/idevicesyslog

CocoaPods 安装与镜像设置

依赖带有原生 iOS 代码的 Flutter 插件，需安装 CocoaPods，它会捆绑 Flutter 和 iOS 代码之间的各种依赖关系。

1、ruby 升级

brew install ruby

加到 ~/.zshrc ：

export PATH="/opt/homebrew/opt/ruby/bin:$PATH"

2、设置 gem 镜像

https://mirrors.tuna.tsinghua.edu.cn/help/rubygems/

3、安装 CocoaPods：

https://cocoapods.org/

sudo gem install cocoapods

增加环境变量：

export PATH=$HOME/.gem/bin:$PATH

CocoaPods 的可执行文件可能被安装到了其他路径，可以通过 gem environment 的 EXECUTABLE DIRECTORY 查看路径，加入到环境变量：

export PATH="/opt/homebrew/lib/ruby/gems/3.4.0/bin:$PATH"

验证是否已安装：

pod --version

3、设置 CocoaPods 镜像

https://mirrors.tuna.tsinghua.edu.cn/help/CocoaPods/

设置完后，每个工程都需要在工程的 podFile 第一行加上：

source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

podFile 文件会在 pubspec.yaml 添加第三方依赖后，执行 flutter pub get 后生成。

安装第三方依赖

https://pub.dev/

搜索对应的包，到 Installing 页签查看安装方法。

比如安装：

flutter pub add fluttertoast

引入：

import 'package:fluttertoast/fluttertoast.dart';

使用：

Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );

启动及调试项目

到 VSCode 左侧 Flutter 插件处选择设备，如果没有模拟器则通过命令 Flutter: Select Device 选择 Start iOS Simulator 开启。

然后到 VSCode 左侧 Dubug 处，点击 Run And Debug 启动。也可以通过 flutter run 指令运行。保存即可热更新，也可以到 Flutter 插件处点当前运行设备旁的闪电按钮。

目前发现 iOS 真机无法通过 VSCode Dubug 运行，但 flutter run 指令可以正常使用真机运行，实时热更新。修改代码后，到终端触发热更新，大写的 R 代表 Hot Restart，小写的 r 代表 Hot Reload。

使用 flutter run 启动真机调试时，依赖调试环境，一旦电脑停止调试，应用就无法打开。可通过 flutter run --release 命令进行 Release 模式编译，会使用 AOT 提前编译把 Dart 代码彻底编译成 iOS 原生的机器码，剥离所有调试工具，运行速度也比调试模式快很多。

入门资料

从文档找了一些入门资料，可以对 Flutter 开发有一个比较整体的认识：

Dart 文档： https://dart.cn/
入门项目： https://codelabs.developers.google.cn/codelabs/flutter-codelab-first
给 React Native 开发者的 Flutter 指南： https://docs.flutter.cn/get-started/flutter-for/react-native-devs
给 Web 开发者的 Flutter 指南： https://docs.flutter.cn/get-started/flutter-for/web-devs
深入理解 Flutter 布局约束： https://docs.flutter.cn/ui/layout/constraints

中文文档： https://docs.flutter.cn/