pub.dev 常用包 vs npm 生态对照
Flutter 的 pub.dev 等价于 npm，pubspec.yaml 等价于 package.json
一、包管理命令对照
| npm / yarn |
Flutter |
说明 |
npm install |
flutter pub get |
安装所有依赖 |
npm install axios |
flutter pub add dio |
添加单个包 |
npm uninstall axios |
flutter pub remove dio |
移除包 |
npm update |
flutter pub upgrade |
升级所有包 |
npm outdated |
flutter pub outdated |
查看过期包 |
package.json |
pubspec.yaml |
依赖配置文件 |
package-lock.json |
pubspec.lock |
锁定版本文件 |
node_modules/ |
.pub-cache/ |
本地缓存目录 |
npm run build |
flutter build apk / ios / web |
构建 |
npm start |
flutter run |
开发运行 |
npx |
dart run |
执行 Dart 脚本 |
二、网络请求
| npm 包 |
pub.dev 包 |
说明 |
axios |
dio |
HTTP 客户端，拦截器、取消请求、上传进度 |
fetch（原生） |
http |
官方轻量 HTTP 包 |
socket.io-client |
web_socket_channel |
WebSocket |
graphql |
graphql_flutter |
GraphQL 客户端 |
dependencies:
dio: ^5.4.0
http: ^1.2.0
web_socket_channel: ^2.4.0
三、状态管理
| npm 包 |
pub.dev 包 |
说明 |
| React Context（内置） |
provider |
官方推荐，基于 InheritedWidget |
zustand |
riverpod |
现代状态管理，类型安全 |
redux |
flutter_bloc |
Redux 思想，Bloc 模式 |
mobx |
mobx + flutter_mobx |
响应式状态管理 |
jotai |
riverpod（atom） |
原子化状态 |
valtio |
get |
GetX，简单轻量 |
dependencies:
provider: ^6.1.0 # React Context 等价
flutter_riverpod: ^2.5.0 # Zustand 等价（推荐）
flutter_bloc: ^8.1.0 # Redux 等价
四、路由导航
| npm 包 |
pub.dev 包 |
说明 |
react-router-dom |
go_router |
声明式路由（官方推荐） |
react-router-dom（v5） |
auto_route |
代码生成路由 |
| Navigator 1.0 |
内置 Navigator |
命令式路由（无需额外包） |
dependencies:
go_router: ^13.0.0
五、UI 组件库
| npm 包 |
pub.dev 包 |
说明 |
antd / MUI |
Flutter 内置 Material |
官方 Material Design |
antd / MUI |
flutter_cupertino |
iOS 风格组件（内置） |
| 第三方 UI 库 |
flutter_ui_kit |
社区 UI 组件 |
图表：recharts |
fl_chart |
折线图、柱状图、饼图 |
图表：echarts |
syncfusion_flutter_charts |
功能更全的图表库 |
轮播：swiper |
carousel_slider |
图片轮播 |
| 瀑布流：自定义 |
flutter_staggered_grid_view |
瀑布流/不等高网格 |
| 下拉刷新 |
pull_to_refresh |
下拉刷新 + 上拉加载 |
| 骨架屏 |
shimmer |
Loading 骨架屏效果 |
dependencies:
fl_chart: ^0.66.0
carousel_slider: ^4.2.1
flutter_staggered_grid_view: ^0.7.0
shimmer: ^3.0.0
六、本地存储
| npm 包 |
pub.dev 包 |
说明 |
localStorage |
shared_preferences |
K-V 存储，等价于 localStorage |
IndexedDB / localforage |
hive |
轻量高性能本地数据库 |
sqlite |
sqflite |
SQLite 数据库 |
cookies |
flutter_secure_storage |
安全存储（加密，存 Token） |
redux-persist |
hydrated_bloc |
状态持久化 |
dependencies:
shared_preferences: ^2.2.0 # localStorage 等价
flutter_secure_storage: ^9.0.0 # 安全存储 Token
hive: ^2.2.3 # 本地数据库
hive_flutter: ^1.1.0
sqflite: ^2.3.0 # SQLite
七、图片处理
| npm 包 |
pub.dev 包 |
说明 |
react-lazyload |
cached_network_image |
网络图片缓存 + 占位符 |
react-dropzone |
image_picker |
选择图片/相机拍照 |
compressorjs |
flutter_image_compress |
图片压缩 |
| SVG（内置） |
flutter_svg |
SVG 图片支持 |
lottie-react |
lottie |
Lottie 动画 |
dependencies:
cached_network_image: ^3.3.0
image_picker: ^1.0.0
flutter_svg: ^2.0.0
lottie: ^3.0.0
八、工具类
| npm 包 |
pub.dev 包 |
说明 |
dayjs / date-fns |
intl |
日期格式化 |
uuid |
uuid |
生成 UUID |
lodash |
Dart 内置（collection 包） |
数组/对象工具 |
classnames |
无（直接条件判断） |
- |
crypto-js |
crypto |
加密（Dart 内置） |
js-cookie |
flutter_secure_storage |
Cookie / Token 存储 |
i18next |
flutter_localizations + intl |
国际化 i18n |
react-i18next |
easy_localization |
i18n（更易用） |
@sentry/react |
sentry_flutter |
错误监控 |
react-query |
flutter_query / riverpod |
服务端状态管理 |
dependencies:
intl: ^0.19.0
uuid: ^4.3.0
easy_localization: ^3.0.0
sentry_flutter: ^7.0.0
flutter:
generate: true # 开启 i18n 代码生成
九、权限与设备
| 场景 |
pub.dev 包 |
说明 |
| 权限请求（相机/位置/通知） |
permission_handler |
统一权限管理 |
| 获取 GPS 位置 |
geolocator |
地理位置 |
| 设备信息 |
device_info_plus |
设备型号、系统版本 |
| 网络状态 |
connectivity_plus |
检测网络连接 |
| 本地通知 |
flutter_local_notifications |
本地推送 |
| 分享 |
share_plus |
系统分享 |
| 打开链接 |
url_launcher |
打开浏览器/拨号 |
| 剪贴板 |
内置 Clipboard |
复制粘贴 |
dependencies:
permission_handler: ^11.0.0
geolocator: ^11.0.0
connectivity_plus: ^6.0.0
url_launcher: ^6.2.0
share_plus: ^7.2.0
十、开发工具（devDependencies）
| npm 包 |
pub.dev 包 |
说明 |
eslint |
flutter_lints |
代码规范检查 |
prettier |
dart format（内置） |
代码格式化 |
jest |
flutter_test（内置） |
单元测试 |
@testing-library/react |
flutter_test（内置） |
Widget 测试 |
husky |
- |
Git hooks（需手动配置） |
json-server |
json_serializable |
JSON 模型代码生成 |
typescript |
Dart（强类型内置） |
类型系统（无需额外安装） |
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^5.0.0
json_serializable: ^6.7.0 # fromJson/toJson 代码自动生成
build_runner: ^2.4.0 # 代码生成工具
十一、pubspec.yaml 完整示例
name: my_app
description: My Flutter App
version: 1.0.0+1
environment:
sdk: ^3.0.0
dependencies:
flutter:
sdk: flutter
# 网络
dio: ^5.4.0
cached_network_image: ^3.3.0
# 状态管理
provider: ^6.1.0
# 路由
go_router: ^13.0.0
# 存储
shared_preferences: ^2.2.0
flutter_secure_storage: ^9.0.0
# 工具
intl: ^0.19.0
uuid: ^4.3.0
# UI
fl_chart: ^0.66.0
lottie: ^3.0.0
flutter_svg: ^2.0.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^5.0.0
build_runner: ^2.4.0
json_serializable: ^6.7.0
flutter:
uses-material-design: true
assets:
- assets/images/
- assets/animations/
fonts:
- family: PingFang
fonts:
- asset: assets/fonts/PingFang.ttf
十二、版本约束规则
# 等价于 npm 的 semver
dio: ^5.4.0 # ^：兼容版本（5.x.x），等价于 npm ^
dio: ~5.4.0 # ~：补丁版本（5.4.x），等价于 npm ~
dio: 5.4.0 # 精确版本，等价于 npm 5.4.0
dio: ">=5.0.0 <6.0.0" # 范围
dio: any # 任意版本（不推荐）