Flutter 入门：从零搭建第一个跨平台应用

前言

Flutter 是 Google 开源的 UI 工具包，使用 Dart 语言，通过自渲染引擎（Skia / Impeller）直接在 Canvas 上绘制 UI，不依赖平台原生控件。这意味着你写一套代码，就能在 Android、iOS、Web、Desktop 等平台获得一致的视觉效果。

作为独立开发者，Flutter 是我用过的开发效率最高的移动端框架。这篇文章记录了我从零开始搭建 Flutter 环境的全过程，希望能帮你省去踩坑的时间。

💡 提示

本文基于 Flutter 3.x，macOS 环境演示。Windows 用户步骤类似，注意路径格式差异即可。

环境配置

安装 Flutter SDK

访问 flutter.dev 下载对应平台的 SDK 压缩包，解压到合适目录，然后将 bin 目录加入 PATH：

# macOS / Linux（添加到 ~/.zshrc 或 ~/.bashrc）
export PATH="$HOME/flutter/bin:$PATH"

# 验证安装
flutter doctor

flutter doctor 会列出所有依赖项的状态。第一次运行通常会提示缺少 Android SDK 或 Xcode 命令行工具，按照提示逐项修复即可。

配置 IDE

推荐使用 VS Code（轻量）或 Android Studio（功能全）。安装对应的 Flutter 和 Dart 插件后，IDE 就能提供代码补全、热重载按钮和调试支持。

创建第一个项目

flutter create my_first_app
cd my_first_app
flutter run

执行 flutter run 后，Flutter 会自动检测连接的设备（模拟器或真机），编译并安装 App。首次编译较慢（5~10分钟），后续热重载只需不到一秒。

项目结构解析

my_first_app/
├── android/          # Android 原生工程
├── ios/              # iOS 原生工程
├── lib/
│   └── main.dart     # Dart 入口文件 ← 主要工作区
├── test/             # 单元测试
└── pubspec.yaml      # 依赖配置（类似 package.json）

日常开发几乎只需关注 lib/ 目录。pubspec.yaml 用于管理第三方包，类似于前端的 package.json。

Flutter 中一切皆 Widget，UI 通过嵌套 Widget 树来构建：

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: 'MyAssets Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hello Flutter')),
      body: const Center(
        child: Text(
          '我的第一个 Flutter App 🚀',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

修改代码后按 r 热重载，按 R 热重启。绝大多数 UI 修改都能通过热重载秒级生效，这是 Flutter 开发体验极佳的核心原因之一。

运行到真机

Android：打开手机「开发者选项」→ 开启「USB 调试」→ 连接电脑 → flutter devices 确认识别 → flutter run。

iOS：需要 Apple 开发者账号（免费账号可临时调试）。用 Xcode 打开 ios/Runner.xcworkspace，配置 Bundle ID 和签名，然后 flutter run。

⚠️ 常见坑

iOS 真机调试时经常遇到"证书过期"或"设备未注册"报错，确保开发者账号的证书和设备 UDID 都已正确配置。免费账号每 7 天需要重新签名。

总结

Flutter 的上手门槛不高，关键在于理解「一切皆 Widget」的核心概念，以及习惯 Dart 的语法。配好环境后，用热重载开发 UI 的体验非常流畅。

用 flutter doctor 解决环境问题
lib/main.dart 是所有逻辑的起点
StatelessWidget 用于静态 UI，StatefulWidget 用于有状态的组件
热重载（r）是日常开发神器

下一篇文章，我们来聊聊 Flutter 最让人头疼又最核心的话题——状态管理。

前言