Flutter 开发工具

本文档介绍 Flutter 开发中常用的工具和技巧，帮助你提升开发效率。

🛠️ Flutter CLI 命令

项目管理

bash

# 创建新项目
flutter create my_app

# 创建特定平台的项目
flutter create --platforms=ios,android,web my_app

# 创建使用特定语言的项目
flutter create --ios-language swift --android-language kotlin my_app

# 创建包/插件
flutter create --template=package my_package
flutter create --template=plugin my_plugin

运行与调试

bash

# 运行项目
flutter run

# 在特定设备上运行
flutter run -d <device-id>

# 运行发布版本
flutter run --release

# 运行性能分析版本
flutter run --profile

# 热重载
# 在运行时按 r 键

# 热重启
# 在运行时按 R 键

# 查看可用设备
flutter devices

# 查看日志
flutter logs

构建

bash

# 构建 APK（Android）
flutter build apk

# 构建 App Bundle
flutter build appbundle

# 构建 iOS
flutter build ios

# 构建 macOS
flutter build macos

# 构建 Web
flutter build web

# 构建 Windows
flutter build windows

# 构建 Linux
flutter build linux

测试

bash

# 运行所有测试
flutter test

# 运行特定测试文件
flutter test test/widget_test.dart

# 运行集成测试
flutter drive --target=test_driver/app.dart

分析与诊断

bash

# 分析代码
flutter analyze

# 格式化代码
flutter format lib/

# 检查环境
flutter doctor

# 详细检查
flutter doctor -v

# 清理构建缓存
flutter clean

# 获取依赖
flutter pub get

# 更新依赖
flutter pub upgrade

# 查看过期的包
flutter pub outdated

Flutter 配置

bash

# 查看 Flutter 配置
flutter config

# 启用/禁用特性
flutter config --enable-web
flutter config --enable-macos-desktop
flutter config --enable-windows-desktop
flutter config --enable-linux-desktop

# 切换渠道
flutter channel stable
flutter channel beta
flutter channel dev

# 更新 Flutter
flutter upgrade

# 降级 Flutter
flutter downgrade

🎨 开发工具对比

VS Code

优点：

✅ 轻量级，启动快
✅ 免费开源
✅ 扩展丰富
✅ 内存占用小
✅ 跨平台

缺点：

❌ 功能相对简单
❌ Android 调试体验略差

推荐场景：

日常开发
小型项目
需要轻量级工具

Android Studio

优点：

✅ 功能强大
✅ Android 开发体验最佳
✅ 官方支持
✅ 集成完善

缺点：

❌ 重量级，启动慢
❌ 内存占用大

推荐场景：

Android 原生开发
大型项目
需要强大的调试功能

IntelliJ IDEA

与 Android Studio 类似，但更通用。

🔌 VS Code 必备扩展

Flutter & Dart

Flutter (官方)

语法高亮
代码补全
热重载支持
Widget 检查器

Dart (官方)

Dart 语言支持
调试功能
代码分析

代码增强

Awesome Flutter Snippets

常用代码片段
快速生成 Widget

dart

// 输入 statelessW 自动生成
StatelessWidget

// 输入 statefulW 自动生成
StatefulWidget

Flutter Widget Snippets

更多 Widget 片段

Dart Data Class Generator

快速生成数据类

工具类

Error Lens

实时显示错误和警告
代码内联显示

GitLens

Git 增强
代码历史查看

Todo Tree

TODO 注释高亮
任务管理

Material Icon Theme

美化文件图标

Bracket Pair Colorizer 2

括号配对高亮

📱 Flutter DevTools

启动 DevTools

bash

# 方法 1：命令行启动
flutter pub global activate devtools
flutter pub global run devtools

# 方法 2：运行时自动打开
flutter run --devtools

功能介绍

查看 Widget 树
检查 Widget 属性
调试布局问题
实时修改属性

快捷键：

p - 显示网格覆盖
o - 显示 Widget 边界
z - 显示 RenderBox 边界

2. Timeline（时间线）

性能分析
帧率监控
卡顿检测
GPU 线程分析

使用技巧：

点击 "Record" 开始录制
执行需要分析的操作
点击 "Stop" 停止录制
分析时间轴

3. Memory（内存）

内存使用监控
内存泄漏检测
对象追踪
GC 监控

查找内存泄漏：

进入目标页面
点击 "Snapshot"
退出页面
点击 GC
再次 "Snapshot"
对比两次快照

4. Network（网络）

HTTP 请求监控
WebSocket 监控
请求时间分析
响应内容查看

5. Logging（日志）

应用日志查看
过滤和搜索
日志级别分类

6. App Size（应用大小）

分析应用大小
查看各部分占比
优化建议

🔍 调试技巧

断点调试

VS Code：

点击行号左侧设置断点
按 F5 启动调试
使用调试工具栏控制

常用快捷键：

F5 - 继续
F10 - 单步跳过
F11 - 单步进入
Shift+F11 - 单步跳出
Shift+F5 - 停止调试

print vs debugPrint

dart

// print - 普通输出，可能被截断
print('Hello World');

// debugPrint - 调试输出，不会截断
debugPrint('Very long message...');

// 条件输出
assert(() {
  debugPrint('Debug mode only');
  return true;
}());

Flutter Inspector

dart

// 在 Widget 中
debugDumpApp(); // 打印 Widget 树

// 在 RenderObject 中
debugDumpRenderTree(); // 打印渲染树

// 打印层级树
debugDumpLayerTree();

// 打印语义树
debugDumpSemanticsTree();

性能标记

dart

import 'package:flutter/foundation.dart';

Timeline.startSync('MyOperation');
// 执行操作
Timeline.finishSync();

📦 包管理

pubspec.yaml

yaml

name: my_app
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  
  # 网络请求
  dio: ^5.3.3
  
  # 状态管理
  provider: ^6.0.5
  
  # 路由
  go_router: ^12.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  
  # 代码分析
  flutter_lints: ^3.0.0

flutter:
  uses-material-design: true
  
  # 资源文件
  assets:
    - assets/images/
    - assets/fonts/
  
  # 字体
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf
        - asset: assets/fonts/CustomFont-Bold.ttf
          weight: 700

常用命令

bash

# 获取依赖
flutter pub get

# 更新依赖
flutter pub upgrade

# 检查过期包
flutter pub outdated

# 添加依赖
flutter pub add package_name

# 移除依赖
flutter pub remove package_name

# 运行脚本
flutter pub run script_name

🚀 性能优化工具

性能监控

dart

import 'package:flutter/rendering.dart';

void main() {
  // 启用性能覆盖
  debugPaintSizeEnabled = true; // 显示大小
  debugPaintBaselinesEnabled = true; // 显示基线
  debugPaintLayerBordersEnabled = true; // 显示层边界
  debugPaintPointersEnabled = true; // 显示点击位置
  debugRepaintRainbowEnabled = true; // 重绘彩虹
  
  runApp(MyApp());
}

Build 分析

bash

# 分析构建大小
flutter build apk --analyze-size

# 生成构建报告
flutter build apk --target-platform android-arm --split-per-abi

🎯 实用技巧

1. 热重载 vs 热重启

热重载（r）：

保留状态
快速
适合 UI 调整

热重启（R）：

重置状态
较慢
适合逻辑变更

2. 调试模式 vs 发布模式

bash

# Debug 模式（默认）
flutter run

# Profile 模式（性能分析）
flutter run --profile

# Release 模式（正式发布）
flutter run --release

dart

// 只刷新部分 Widget
ValueNotifier<int> counter = ValueNotifier(0);

ValueListenableBuilder<int>(
  valueListenable: counter,
  builder: (context, value, child) {
    return Text('$value');
  },
)

4. 代码生成

bash

# JSON 序列化代码生成
flutter pub run build_runner build

# 监听文件变化自动生成
flutter pub run build_runner watch

📚 推荐工具

设计工具

Figma - UI 设计
Zeplin - 设计标注
FlutterFlow - 可视化开发

测试工具

Flutter Driver - 集成测试
Mockito - 模拟测试
Golden Tests - 截图对比

CI/CD

Codemagic - Flutter 专用 CI/CD
GitHub Actions - 自动化流程
Fastlane - 部署自动化

分析工具

Firebase Crashlytics - 崩溃分析
Firebase Analytics - 数据分析
Sentry - 错误追踪

🔗 相关链接

掌握这些工具，让 Flutter 开发更高效！🚀

Flutter 开发工具 ​

🛠️ Flutter CLI 命令 ​

项目管理 ​

运行与调试 ​

构建 ​

测试 ​

分析与诊断 ​

Flutter 配置 ​

🎨 开发工具对比 ​

VS Code ​

Android Studio ​

IntelliJ IDEA ​

🔌 VS Code 必备扩展 ​

Flutter & Dart ​

代码增强 ​

工具类 ​

📱 Flutter DevTools ​

启动 DevTools ​

功能介绍 ​

1. Widget Inspector（Widget 检查器） ​

2. Timeline（时间线） ​

3. Memory（内存） ​

4. Network（网络） ​

5. Logging（日志） ​

6. App Size（应用大小） ​

🔍 调试技巧 ​

断点调试 ​

print vs debugPrint ​

Flutter Inspector ​

性能标记 ​

📦 包管理 ​

pubspec.yaml ​

常用命令 ​

🚀 性能优化工具 ​

性能监控 ​

Build 分析 ​

🎯 实用技巧 ​

1. 热重载 vs 热重启 ​

2. 调试模式 vs 发布模式 ​

3. Widget 刷新技巧 ​

4. 代码生成 ​

📚 推荐工具 ​

设计工具 ​

测试工具 ​

CI/CD ​

分析工具 ​

🔗 相关链接 ​

Flutter 开发工具

🛠️ Flutter CLI 命令

项目管理

运行与调试

构建

测试

分析与诊断

Flutter 配置

🎨 开发工具对比

VS Code

Android Studio

IntelliJ IDEA

🔌 VS Code 必备扩展

Flutter & Dart

代码增强

工具类

📱 Flutter DevTools

启动 DevTools

功能介绍

1. Widget Inspector（Widget 检查器）

2. Timeline（时间线）

3. Memory（内存）

4. Network（网络）

5. Logging（日志）

6. App Size（应用大小）

🔍 调试技巧

断点调试

print vs debugPrint

Flutter Inspector

性能标记

📦 包管理

pubspec.yaml

常用命令

🚀 性能优化工具

性能监控

Build 分析

🎯 实用技巧

1. 热重载 vs 热重启

2. 调试模式 vs 发布模式

3. Widget 刷新技巧

4. 代码生成

📚 推荐工具

设计工具

测试工具

CI/CD

分析工具

🔗 相关链接