likes
comments
collection
share

Flutter入门概览3-工具篇

作者站长头像
站长
· 阅读数 42

Flutter概览

Flutter语言使用 Dart，开发IDE使用VSCode、Android Studio 或 IntelliJ IDEA，推荐使用VSCode。

注：本文以Mac环境，开发使用iOS模拟器为例。

需要安装的工具列表：

  • Xcode、模拟器
  • Aflred（或Raycast、uTools、HapiGo等）
  • fvm
  • VSCode

Xcode/模拟器安装

需要先通过Mac的App Store安装Xcode和模拟器，Xcode下载好后安装模拟器。

Alfred配置

配置Alfred实现Dart API和Flutter API的快速查询。

注：这里以Alfred为例，其他Raycast、uTools、HapiGO等原理是一样的，按照个人习惯选择。

Pub Dev 查询

在pub.dev中查询Flutter和Dart库

https://pub-web.flutter-io.cn/packages?q={query}

Dart API 查询

在Alfred中添加以下Web Search，实现通过Alfred搜索Dart API：

// 这里有一点不好，dart api的url是分版本的，没有一个公共链接指向最新api，所以这里版本号需要经常更新
https://api.dart.dev/stable/3.3.0/search.html?q={query}

效果：

Flutter入门概览3-工具篇

Flutter API 查询

在Alfred中添加以下Web Search，实现通过Alfred搜索Flutter API：

https://api.flutter-io.cn/flutter/search.html?q={query}

效果：

Flutter入门概览3-工具篇

fvm

Flutter Version Management，Flutter版本管理工具，使用fvm可以在不同版本的flutter直接切换。

⚠️注意：推荐使用该工具安装flutter sdk，方便管理多版本，不要直接按照官方文档下载sdk进行安装。

安装fvm

# install
brew tap leoafarias/fvm
brew install fvm

# uninstall
brew uninstall fvm
brew untap leoafarias/fvm

常用命令

# releases 查看远端最新15个已发布的flutter版本
fvm releases | tail -15


# install 安装指定版本的flutter
fvm install 3.16.5

# list 查看本机安装的flutter版本
fvm list

# use 在某个工程中使用指定的flutter版本
fvm use 3.16.5

# remove 删除指定版本的flutter sdk
fvm remove 3.16.5

# global 全局切换flutter版本
fvm global 3.16.5

fvm use

在工程内使用fvm use xxxVersion后工程内会生成以下文件：

.
├── flutter_sdk # 是个软链接，指向fvm对应版本 -> ~/fvm/versions/3.19.2
└── fvm_config.json # fvm 配置文件

# fvm_config.json
{
  "flutter": "3.19.2",
  "flavors": {
    "development": "stable",
    "staging": "3.16.9",
    "production": "3.10.3"
  }
}

fvm_config.json 说明：

  • flutter，指向当前工程配置版本
  • flavors，可以配置不同开发环境的flutter版本

国内安装

flutter国内团队维护了一个国内镜像源，推荐使用国内镜像

# 1. ~/.zshrc 文件下添加以下环境变量
# flutter国内镜像站点
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PUB_HOSTED_URL=https://pub.flutter-io.cn

# 2. 使环境变量生效
source ~/.zshrc

# 3. 使用 fvm install 3.16.5 命令安装flutter sdk
fvm install 3.16.5

# 4. 我在安装时一直报 ~/.pub-cache下面几个文件权限错误：
# OS Error: Permission denied, errno = 13
# 一怒之下，把 ~/.pub-cache/ 下面几个文件夹全部 chmod 777，然后才安装正常....

# 5. 设定为全局版本
fvm global 3.16.5

# 6. 把以下内容写进环境变量，就可以使用flutter命令，注意替换 your-user-name 
# flutter 
export PATH="$PATH:/Users/your-user-name/fvm/default/bin"

# 7. 使环境变量生效
source ~/.zshrc

# 8. 执行 flutter doctor 命令检查
flutter doctor

安装Cocoapods问题

mac自带的ruby是2.x版本，版本较低，最新的Cocoapods已经无法满足，因此使用 brew升级 ruby。

# 1. 升级 ruby 
# 先升级brew
brew update
# 使用brew 安装 ruby
brew install ruby

# 2. 安装后，当前ruby版本还是系统默认版本，需要修改环境变量
echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc
# 使环境变量生效
source ~/.zshrc

# 3. 查看ruby 版本
ruby -v

安装Cocoapods

# 1. 安装 cocoapods
sudo gem install cocoapods

# 2. 添加环境变量，
echo 'export PATH="/opt/homebrew/lib/ruby/gems/3.2.0/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

# 3. 查看 cocoapods 版本
pod --version

参考资料

VSCode

前端推荐使用VSCode.

常用插件

使用VSCode开发，建议安装以下插件：

  • Flutter，主插件
  • Dart，Dart语言插件
  • [FF] Flutter Files，quickly scaffold flutter BLoC templates
  • Flutter Color，颜色快捷显示
  • ARB Editor，多语言.arb文件，该扩展可增添语法高亮显示、片段、诊断和快速修复功能，以辅助编辑 .arb 模板文件
  • Flutter Intl，Flutter国际化插件
  • Awesome Flutter Snippets， 快速创建代码块
  • Flutter Widget Snippets，快速创建Flutter和Dart代码块（推荐使用这个，记太多Snippet也是一件头疼的事）

创建第一个工程

  1. 参考官方教程 开发体验初探 ，创建第一个工程运行。
  2. 安装依赖。
  3. 选中 lib/man.dart，然后Run - Start Debugging启动调试应用。

工程操作

1. 选择模拟器

Mac推荐使用iOS模拟器，需要提前下载Xcode和通过Xcode下载好模拟器。右下角，点击下图所示位置选择。

Flutter入门概览3-工具篇

2. 安装包依赖

右上角点击下图所示按钮，会自动安装包依赖，或者通过命令 flutter pub get

Flutter入门概览3-工具篇

3. 运行

有两种方式：

  • 调试模式，需要在 lib/main.dart 入口文件，点击右上角运行，或 Run - Start Debugging，注意一定要在这个入口文件运行，否则会弹框提示You don't have an extension for debugging YAML。
  • 直接使用 flutter run 命令，会自动运行工程唤起模拟器。

注意：⚠️使用调试模式会可以直接在VSCode上调试，推荐使用这种方式。

4. 调试

两种方式调试区别：

  • 使用flutter run 命令，在VSCode上不会有debugger工具显示，调试会启动一个web服务生成一个本地地址，通过在浏览器上进行调试。终端会输出以下信息：

    A Dart VM Service on iPhone 15 Pro Max is available at: http://127.0.0.1:57539/I2OjTr6bSwc=/

    The Flutter DevTools debugger and profiler on iPhone 15 Pro Max is available at: http://127.0.0.1:9102?uri=http://127.0.0.1:57539/I2OjTr6bSwc=/

    在浏览器打开页面后，会有一个类似Chrome DevTools的调试页面

    Flutter入门概览3-工具篇

  • 使用调试模式打开，会在Xcode上显示调试页面，同时可以在Xcode上看到一个DevTools，但是一样也可以在浏览器上打开。运行后，DEBUG CONSOLE会输出一个地址，通过那个地址可以打开浏览器调试页面。VSCode里的操作参考在 VS Code 里安装和使用开发者工具 。简单来说就是运行工程后，通过命令控制板输入 devtools，然后选择调试工具。

Flutter入门概览3-工具篇

Flutter入门概览3-工具篇

断点调试：

  • VSCode调试模式下，可以直接通过VSCode打断点调试，代码会直接停在VSCode对应代码内，或者代码设置debugger() 函数。
  • flutter run 命令，需要代码内设置debugger() 函数，然后通过浏览器的调试工具调试，类似前端调试方式。

⚠️综上所述，推荐直接使用VSCode调试模式。

参考资料

转载自:https://juejin.cn/post/7378750771414237238
评论
请登录