跨平台开发利器：Flutter 入门与实战指南（附图文+代码）

h64648564h

1417人浏览 · 2025-12-09 19:30:18

h64648564h · 2025-12-09 19:30:18 发布

一、引言：为什么选择 Flutter？

在移动应用开发领域，开发者常常面临一个难题：如何同时为 iOS 和 Android 构建高质量、高性能的应用？传统方式需要分别使用 Swift/Kotlin 编写两套代码，维护成本高、迭代效率低。

而 Flutter —— 由 Google 推出的开源 UI 工具包，凭借“一次编写，多端运行”的理念，迅速成为跨平台开发的热门选择。它不仅支持 iOS 和 Android，还扩展到 Web、Windows、macOS 和 Linux！

本文将带你从零开始了解 Flutter，通过图文并茂的方式和完整代码案例，助你快速上手！

二、Flutter 的核心优势

✅ 1. 高性能渲染

Flutter 使用 Skia 图形引擎直接绘制 UI，绕过原生控件，实现 60fps 甚至 120fps 的流畅体验。

图：Flutter 渲染不依赖原生组件，直接操作 GPU

✅ 2. 热重载（Hot Reload）

修改代码后无需重新编译，秒级刷新 UI，极大提升开发效率。

✅ 3. 丰富的 Widget 生态

一切皆是 Widget！从按钮到布局，全部由可组合的 Widget 构成，灵活且一致。

✅ 4. 单一代码库

一套 Dart 代码，可编译为 iOS、Android、Web 等多个平台应用。

三、环境搭建（以 Windows 为例）

安装 Flutter SDK
官网下载：https://flutter.dev
解压到 C:\src\flutter
配置环境变量
将 C:\src\flutter\bin 添加到系统 PATH。
安装 Android Studio + Flutter/Dart 插件
运行命令检查环境：

bash

编辑

flutter doctor

确保所有项都打勾 ✅。

四、第一个 Flutter 应用：Hello World！

1. 创建项目

bash

编辑

flutter create my_first_app
cd my_first_app
flutter run

2. 核心代码解析（`lib/main.dart`）

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(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('欢迎使用 Flutter!')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'Hello, CSDN!',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            FlutterLogo(size: 100),
          ],
        ),
      ),
    );
  }
}

3. 运行效果（模拟器截图）

图：运行在 Android 模拟器上的 Flutter 应用

💡 提示：修改文字内容后，按 r 键即可热重载，无需重启！

五、实战案例：一个简单的待办事项（Todo）应用

下面我们构建一个具备添加、删除功能的 Todo 列表，展示 Flutter 的状态管理能力。

1. 整体结构

使用 StatefulWidget 管理任务列表状态
通过 TextField 输入新任务
ListView.builder 动态渲染列表
点击删除图标移除任务

2. 完整代码

dart

编辑

import 'package:flutter/material.dart';

void main() => runApp(const TodoApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo List',
      theme: ThemeData(primarySwatch: Colors.green),
      home: const TodoListScreen(),
    );
  }
}

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

  @override
  State<TodoListScreen> createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  final List<String> _todos = [];
  final TextEditingController _controller = TextEditingController();

  void _addTodoItem(String title) {
    if (title.trim().isNotEmpty) {
      setState(() {
        _todos.add(title);
      });
      _controller.clear();
    }
  }

  void _removeTodoItem(int index) {
    setState(() {
      _todos.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('我的待办事项')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: const InputDecoration(hintText: '输入新任务...'),
                    onSubmitted: _addTodoItem,
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.add),
                  onPressed: () => _addTodoItem(_controller.text),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _todos.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_todos[index]),
                  trailing: IconButton(
                    icon: const Icon(Icons.delete, color: Colors.red),
                    onPressed: () => _removeTodoItem(index),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

3. 运行效果

图：动态添加/删除待办事项（GIF 动图示意）

✅ 该应用可直接在 Android、iOS 上运行，UI 完全一致！

六、Flutter 支持的平台

平台	状态	适用场景
Android	Stable	所有移动应用
iOS	Stable	所有移动应用
Web	Stable	PWA、管理后台等
Windows	Stable	桌面工具
macOS	Stable	Mac 应用
Linux	Stable	开发者工具