黑白梦

toggle nav

Flutter 初探及开发环境配置

发布于 2024-09-26

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：

https://cocoapods.org/

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 后生成。

安装第三方依赖

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 指令可以正常使用真机运行，实时热更新。

入门资料

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