Flutter 环境搭建

进击的学霸...大约 2 分钟前端Flutter

进行 Flutter 环境的搭建,并安装相关依赖,主要是在 desktop (桌面)平台开发,所以没有 android 和 iOS 相关的环境安装。

安装 flutter

(推荐)安装 flutter 版本管理工具-fvm

fvm 文档open in new window

brew tap leoafarias/fvm
brew install fvm

fvm -v

flutter doctor
# 并非需要全部安装,只安装自己需要的平台相关即可

fvm ls

在 vscode 的 setting.json 中添加 "dart.flutterSdkPaths": ["<Cache directory>"]   ,<Cache directory> 替换为上面命令中输出的地址,在 cmd+shift+P 后输入 change sdk 可以修改 vscode 中使用的 sdk。使用 vscode 的快捷命令生成项目之前先确认下使用的sdk 版本。

(不推荐)手动安装

官网推荐的 vscode 安装有点慢,我使用的手动下载并安装

unzip ~/Downloads/flutter_macos_3.22.0-stable.zip -d ~/development/

vim ~/.zshenv 
# 末尾添加 export PATH=$HOME/development/flutter/bin:$PATH
# save and restart terminal

安装 xcode

App Store 下载个最新版就好了,安装之后执行

# 生成证书
sudo xcodebuild -license
# 按提示 enter 后输入 agree 即可生成

安装 cocoapods

# 换 Ruby 源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

brew install cocoapods

# 替换清华源 https://mirrors.tuna.tsinghua.edu.cn/help/CocoaPods/
cd ~/.cocoapods/repos 
pod repo remove master
git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master

# 进入工程,在 podFile 第一行加上
source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

设置 app sandbox

在 xCode 打开项目目录下的 macos 文件夹,进行设置 设置 app sandbox

调试

到xcode这步,桌面端的环境就够了,安卓和 iOS 的环境可以根据 doctor 命令安装缺少的部分补齐。

在 vscode 中使用 cmd+shift+P 输入 flutter ,选择 select device ,可以选择 Chrome-web 和 macOS-desktop 两种方式,选择后按下 F5 即可开始运行应用。

PS:toggle debug painting 需要在 cmd+shift+p 中调用;再次调用即关闭

Mac 上调试打开应用不再询问

在xcode 中打开项目的 macos 文件夹,在 team 处登录自己的账号,就不会再提示了

codelab

  • 官方 demo 运行,替换完代码后,预期会自动获依赖,如果引用报错在项目下执行 flutter pub get 来再次安装依赖后再执行 debug run 就可以了
评论
  • 按正序
  • 按倒序
  • 按热度