Flutter 的环境安装配置比较友好,也有清晰的中文文档,没什么坑,很顺利地把环境搭建起来了,这里记录 Mac 电脑搭建 iOS 开发环境的安装和配置过程。
中文文档: https://docs.flutter.cn/
设置 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 中配置真机设备部署,通过数据线连接真机,设置信任电脑
- 需要到 XCode 登录后,再到 iPhone 开启开发者模式
- 需要选择团队为 Personal Team ,选择后会进行自动签名、启用开发者证书等
- 设备配置完善后,点击运行即可将程序运行到真机设备
- 真机联通后,后续可以使用 wifi 无线调试
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:
sudo gem install cocoapods
增加环境变量:
export PATH=$HOME/.gem/bin:$PATH
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
后生成。
安装第三方依赖
搜索对应的包,到 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
指令可以正常使用真机运行,实时热更新。
入门资料
从文档找了一些入门资料,可以对 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