Solido/awesome-flutter · 上手攻略

• 仓库：Solido/awesome-flutter
• 链接：https://github.com/Solido/awesome-flutter
• 分类：skill
• 作者：Tom
• 更新：2026-07-12

这是什么

awesome-flutter 是 Flutter 生态中最老牌、最全面的精选列表之一，由 Solido 团队维护（Flutter 官方也曾推荐）。它按类别收录了最优质的 Flutter 库、工具、教程、文章、开源 App 和模板——简单说，如果你用 Flutter，这个列表是你找轮子、找教程、找灵感的第一站。

涵盖范围：状态管理、路由导航、UI 组件、图表、动画、存储、测试、CI/CD、AI 集成、平台通道（iOS/Android/Web/桌面）等全部维度。

解决什么问题

• 找轮子：Flutter 某个功能不知道用什么库？来这里按分类找，节省在 pub.dev 大海捞针的时间
• 找教程：学习某个具体主题时，按图索骥找到最优质的博文、视频、课程
• 了解生态：想了解某个领域的 Flutter 最佳实践，这里有社区验证过的工具清单
• 避免踩坑：收录的库经过社区筛选，踩坑概率低于随机在 pub.dev 找

快速上手

无需安装，直接访问：

# 在浏览器打开
open https://github.com/Solido/awesome-flutter

# 如果想本地阅读（不需要运行代码）
git clone https://github.com/Solido/awesome-flutter.git
cd awesome-flutter
# README.md 即为完整内容，支持按标题搜索

注意：本文攻略基于 2026 年 7 月前后的列表内容，Flutter 生态变化快，库版本信息以各库官方文档为准。

核心内容分类与精选推荐

📚 Articles（文章）

高质量 Flutter 博客和学习资源：

🎬 Videos（视频）

🧩 Components（组件库）

Flutter 最流行的 UI 组件库：

🎨 UI 框架（2025 年值得关注）

🔗 Navigation（路由）

🧪 状态管理（主流方案对比）

Flutter 状态管理是永远的热门话题，主要方案：

🏗️ 框架（Templates & Boilerplate）

🤖 AI / LLM 集成（近年新增重点）

Flutter 生态积极接入 AI 能力：

🧪 Testing & CI

典型使用场景

场景 1：搭建一个新的 Flutter 项目，从零到上线

# 1. 创建项目
flutter create my_app
cd my_app

# 2. 添加核心依赖（参考 awesome-flutter 推荐版本）
flutter pub add riverpod flutter_riverpod
flutter pub add go_router
flutter pub add fl_chart
flutter pub add cached_network_image

# 3. 运行
flutter run

场景 2：用 riverpod + go_router 构建可靠 App 架构

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

// 定义路由
final router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (context, state) => const HomeScreen()),
    GoRoute(path: '/detail/:id', builder: (context, state) {
      final id = state.pathParameters['id']!;
      return DetailScreen(id: id);
    }),
  ],
);

// 状态Provider
final counterProvider = StateProvider<int>((ref) => 0);

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp.router(routerConfig: router),
    ),
  );
}

场景 3：做数据可视化（fl_chart）

import 'package:fl_chart/fl_chart.dart';

Widget buildChart() {
  return LineChart(
    LineChartData(
      lineBarsData: [
        LineChartBarData(
          spots: const [
            FlSpot(0, 3),
            FlSpot(2, 10),
            FlSpot(4, 7),
            FlSpot(6, 12),
          ],
          isCurved: true,
          color: Colors.blue,
        ),
      ],
    ),
  );
}

场景 4：Flutter Web 部署

# 检查 web 支持
flutter config --enable-web

# 切换到 web 平台
flutter run -d chrome

# 构建生产版本
flutter build web

# 输出在 build/web/，可部署到任意静态托管（Vercel、Netlify、Cloudflare Pages）

坑与注意

1. Flutter 版本兼容性：Flutter 3.x / 4.x 对部分老库（特别是状态管理库）有 Breaking Change，pubspec.yaml 中建议锁定 minor 版本： yaml dependencies: flutter_riverpod: ^2.5.0 # 用 ^ 锁定兼容范围
2. go_router 已成官方标准：之前的 Navigator 1.0 和 beamer 正在被快速替代，新项目建议直接用 go_router
3. riverpod vs get：get 上手简单但架构模式不被所有人认可，团队项目建议用 riverpod（更好的类型安全和可测试性）
4. Flutter Web 限制：并非所有 Flutter 插件都支持 Web，发布前务必用 flutter run -d chrome 验证；列表中大量插件标注了 "web" 平台支持
5. 平台通道（Platform Channel）：涉及原生功能（相机、蓝牙、推送通知）时，检查库是否同时支持 iOS 和 Android，以及是否需要额外配置
6. shadcn_ui Flutter：2025 年新兴的项目，API 可能尚未稳定，生产环境使用前确认版本
7. 中文资源：awesome-flutter 以英文资源为主，中文 Flutter 资源可参考 datawhalechina/happy-llm 等其他仓库

与同类对比

本列表的核心优势：老牌（Stars 高）+ 分类清晰 + 覆盖库和教程，是 Flutter 开发者书签必备。

一句话推荐结论

Flutter 开发者的瑞士军刀——无论你是找状态管理方案、做数据图表、还是接入 AI 模型，按分类在这个列表里找，经过社区验证的优质轮子远比在 pub.dev 随机搜索更靠谱。

关键参考链接

• 仓库首页：https://github.com/Solido/awesome-flutter
• Flutter 官方文档：https://flutter.dev/docs
• pub.dev（Flutter 官方包仓库）：https://pub.dev
• Riverpod：https://riverpod.dev
• go_router：https://pub.dev/packages/go_router
• fl_chart：https://pub.dev/packages/fl_chart
• TrendsShift 趋势：https://trendshift.io/repositories/9391