文渊小筑

主题

Flutter 开发 ​

欢迎来到 Flutter 开发知识库！

🦋 Flutter 简介 ​

Flutter 是 Google 开源的跨平台 UI 框架，使用 Dart 语言开发，一套代码可以同时构建 iOS、Android、Web、Desktop 应用。Flutter 以其出色的性能、精美的 UI 和快速的开发体验而闻名。

🎯 学习路线 ​

第一阶段：基础入门 (1-2个月) ​

  1. Dart 语言基础

    • 变量、类型、函数
    • 类与对象
    • 异步编程 (Future/async/await)

  2. Flutter 基础

    • Widget 概念
    • StatelessWidget vs StatefulWidget
    • 常用基础组件

  3. 开发环境

    • Flutter SDK 安装
    • VS Code / Android Studio 配置
    • 热重载使用

第二阶段：进阶学习 (2-3个月) ​

  1. UI 开发

    • 布局系统 (Row/Column/Stack)
    • Material Design 组件
    • 自定义 Widget

  2. 状态管理

    • Provider
    • Riverpod
    • Bloc 模式

  3. 路由与导航

    • Navigator 基础
    • 命名路由
    • go_router

第三阶段：高级应用 (3-6个月) ​

  1. 网络与数据

    • http / dio 网络请求
    • JSON 序列化
    • 本地存储 (SharedPreferences/Hive)

  2. 原生交互

    • Platform Channel
    • 调用原生功能
    • 插件开发

  3. 性能优化

    • 构建优化
    • 列表性能
    • 内存管理

🛠️ 开发工具 ​

必备工具 ​

  • Flutter SDK - Flutter 开发工具包
  • Dart SDK - Dart 语言工具包
  • VS Code / Android Studio - IDE
  • Flutter DevTools - 调试和性能分析工具

推荐插件 ​

  • Flutter / Dart 插件 - 语法高亮和代码补全
  • Flutter Widget Snippets - 快速生成代码片段
  • Awesome Flutter Snippets - 更多代码片段

✨ Flutter 特点 ​

✅ 核心优势 ​

  • 真正的跨平台 - 一套代码，多端运行
  • 高性能 - 直接编译为原生代码，60/120 FPS
  • 热重载 - 秒级刷新，开发效率极高
  • 精美 UI - 内置 Material 和 Cupertino 组件
  • 活跃社区 - pub.dev 上有丰富的第三方包

⚠️ 注意事项 ​

  • 应用体积较大（首次约 4-8MB）
  • 某些平台特性需要原生代码
  • 学习曲线中等

📊 与其他跨平台框架对比 ​

特性FlutterReact NativeUni-app
语言DartJavaScript/TSVue.js
性能⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
学习难度🟡 中等🟢 简单🟢 简单
UI 一致性⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
社区生态⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
就业需求⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

🏗️ 项目结构 ​

my_app/
├── android/              # Android 原生代码
├── ios/                  # iOS 原生代码
├── lib/                  # Dart 代码
│   ├── main.dart        # 应用入口
│   ├── screens/         # 页面
│   │   ├── home_screen.dart
│   │   └── profile_screen.dart
│   ├── widgets/         # 自定义组件
│   ├── models/          # 数据模型
│   ├── services/        # 业务逻辑
│   ├── providers/       # 状态管理
│   └── utils/           # 工具类
├── test/                # 测试
├── assets/              # 资源文件
│   ├── images/
│   └── fonts/
└── pubspec.yaml        # 依赖配置

📖 学习资源 ​

官方资源 ​

推荐课程 ​

中文资源 ​

包管理 ​

  • pub.dev - Dart 和 Flutter 包仓库

🎯 开始学习 ​

选择一个方向开始深入学习：

💡 学习建议 ​

  1. 从 Dart 开始 - 先掌握 Dart 语言基础
  2. 理解 Widget - Widget 是 Flutter 的核心
  3. 多写代码 - 动手实践比看教程更重要
  4. 使用热重载 - 充分利用 Flutter 的快速开发特性
  5. 阅读源码 - pub.dev 上有很多优秀的开源项目
  6. 关注官方 - Flutter 更新很快，关注官方动态

🚀 第一个 Flutter App ​

dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你好，Flutter！',
              style: TextStyle(fontSize: 24),
            ),
            const SizedBox(height: 20),
            Text(
              '计数：$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

运行 flutter run，你的第一个 Flutter App 就完成了！🎉

准备好了吗？让我们开始 Flutter 的跨平台开发之旅！