Flutter 跨平台开发入门指南

什么是 Flutter 跨平台开发

Flutter 是 Google 推出的开源 UI 框架，允许开发者使用一套代码同时构建 Android 和 iOS 应用，甚至支持 Web、Windows、macOS 和 Linux 平台。其核心优势在于 高性能渲染引擎 和 热重载（Hot Reload） 功能，开发者无需重新编译即可实时查看代码修改效果，显著提升开发效率。

与传统跨平台方案（如 React Native）不同，Flutter 通过自研的 Dart 语言 和 Skia 图形引擎 直接绘制界面，避免了原生组件桥接的性能损耗。根据官方数据，Flutter 应用的启动速度比同类方案快 2-3 倍，尤其适合需要复杂动画或高频交互的场景。

典型应用场景包括：

• 初创公司快速验证 MVP（最小可行产品）
• 已有原生应用的部分功能迁移
• 跨平台工具类或内容型应用开发

环境搭建：从零开始配置开发环境

步骤一：安装 Flutter SDK

1. 下载 SDK
   访问 Flutter 官网 下载稳定版 SDK（Windows/macOS/Linux 均支持）。以 macOS 为例：

   # 解压到指定目录
   unzip ~/Downloads/flutter_macos_*.zip -d ~/development/flutter
   

2. 配置环境变量
   编辑 ~/.zshrc（或 ~/.bash_profile），添加：

   export PATH="$PATH:$HOME/development/flutter/bin"
   

   运行 source ~/.zshrc 使配置生效。

3. 验证安装
   执行以下命令检查环境：

   flutter doctor
   

   根据提示安装缺失的依赖（如 Android Studio、Xcode 或 Chrome）。

步骤二：配置 IDE

推荐使用 Android Studio 或 VS Code：

• Android Studio

  1. 安装插件：Flutter 和 Dart（通过 Preferences → Plugins 搜索）
  2. 创建项目：File → New → New Flutter Project

• VS Code

  1. 安装扩展：搜索并安装 Flutter 和 Dart
  2. 创建项目：View → Command Palette 输入 Flutter: New Project

提示：首次运行项目时，IDE 会自动下载 Gradle 和 CocoaPods 依赖，建议保持网络畅通。

Flutter 核心概念解析

Widget：一切皆组件

Flutter 的界面由 Widget 构成，分为两类：

• StatelessWidget：不可变组件（如 Text、Icon）
• StatefulWidget：可变组件（如 Counter 计数器）

示例：创建一个显示文本的组件

class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello Flutter!', style: TextStyle(fontSize: 24));
  }
}

布局系统：Flex + Box 模型

Flutter 使用 Flexbox 类似的布局模型，核心组件包括：

• Row/Column：水平/垂直排列
• Expanded：填充剩余空间
• Container：带边距和背景的容器

示例：居中显示一个红色方块

Center(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

状态管理：setState 与响应式编程

在 StatefulWidget 中，通过 setState 触发界面更新：

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Count: $_count');
  }
}

实战：开发一个计数器应用

步骤一：创建项目

1. 在 IDE 中新建 Flutter 项目，选择 Application 模板
2. 删除 lib/main.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 Counter',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CounterPage(),
    );
  }
}

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

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text('$_count', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}