Flutter 入门实战：环境搭建与核心案例解析

本文旨在为初学者提供 Flutter 开发的全流程指南，涵盖环境搭建、基础组件使用及路由管理等核心知识点。

1. 环境搭建与验证

1.1 核心依赖安装

Flutter 开发需要安装以下工具，建议按顺序进行以避免兼容性问题：

1. Git：用于拉取 Flutter 源码，可从官网下载并安装，安装时请确保勾选“Add Git to PATH”选项。
2. Flutter SDK：访问 Flutter 官网下载对应系统的 SDK 压缩包，解压到自定义目录（避免使用中文或空格路径），例如 D:\flutter 或 /Users/xxx/flutter。
3. 配置环境变量：
   • Windows：在系统环境变量的 Path 中添加 Flutter SDK 的 bin 目录路径。
   • macOS：编辑 ~/.bash_profile 文件，添加 export PATH="$PATH:<Flutter SDK 路径>/bin"，然后执行 source ~/.bash_profile 使配置生效。
4. IDE 选择：推荐使用 Android Studio（需安装 Flutter 插件）或 VS Code（需安装 Flutter 和 Dart 插件），本文示例以 VS Code 为主。

1.2 验证环境

打开终端或命令提示符，执行以下命令检查环境：

flutter doctor

此命令会自动检测并安装缺失的依赖。若输出“No issues found!”，则环境搭建成功；如果提示 Android 许可问题，运行 flutter doctor --android-licenses 并接受协议即可。

2. 实战案例：计数器应用

计数器是 Flutter 入门经典案例，帮助理解有状态组件（StatefulWidget）的状态管理。

2.1 完整代码示例

以下是一个完整的计数器应用代码，包含详细注释：

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter计数器Demo',
      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 _counter = 0;

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

  void _decrementCounter() {
    setState(() {
      if (_counter > 0) _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('计数器')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '当前计数：',
              style: TextStyle(fontSize: 18),
            ),
            Text(
              '$_counter',
              style: TextStyle(
                fontSize: 36,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
            const SizedBox(height: 30),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                  onPressed: _decrementCounter,
                  child: const Text('-', style: TextStyle(fontSize: 24)),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _incrementCounter,
                  child: const Text('+', style: TextStyle(fontSize: 24)),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

2.2 核心逻辑解析

组件分类

• 无状态组件（StatelessWidget）：如 MyApp，用于静态配置，build 方法仅执行一次。
• 有状态组件（StatefulWidget）：如 CounterPage，由 StatefulWidget 和对应的 State 类组成，用于管理动态状态。

setState() 工作原理

setState() 是状态管理的核心，它标记状态为“脏”，触发 Widget 树的重建，从而更新 UI。注意，setState() 必须同步调用，且会导致整个子树重建，优化时可用 const 构造函数减少重建范围。

布局组件详解

• Scaffold：提供 Material 风格的页面脚手架，包括导航栏和正文区域。
• Column 与 Row：用于垂直和水平布局，通过 mainAxisAlignment 控制对齐方式。
• ElevatedButton：Material 设计规范的按钮，提供交互反馈。

3. 实战案例：多页面跳转

掌握路由管理是 Flutter 开发的基础，本例扩展计数器应用，实现跳转到详情页的功能。

3.1 实现详情页与跳转

首先，创建详情页组件 DetailPage：

class DetailPage extends StatelessWidget {
  final int counter;

  const DetailPage({super.key, required this.counter});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('计数详情'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '从首页跳转而来',
              style: TextStyle(fontSize: 20),
            ),
            const SizedBox(height: 20),
            Text(
              '当前计数：$counter',
              style: const TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
            const SizedBox(height: 40),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('返回首页'),
            ),
          ],
        ),
      ),
    );
  }
}

然后，在 CounterPage 中添加跳转逻辑，将“当前计数”文本包装为可点击的 GestureDetector：

GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => DetailPage(counter: _counter),
        settings: const RouteSettings(name: '/detail'),
      ),
    );
  },
  child: Container(
    padding: const EdgeInsets.all(12),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.blue, width: 2),
      borderRadius: BorderRadius.circular(8),
    ),
    child: Text(
      '点击查看详情\n当前计数：$_counter',
      textAlign: TextAlign.center,
      style: const TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
        color: Colors.blue,
      ),
    ),
  ),
)

3.2 路由管理核心

• 路由栈：Flutter 使用 Navigator 管理页面栈，push 方法压入新页面，pop 方法弹出当前页面。
• 参数传递：可通过构造函数传递参数，如本案例中的 counter；也可使用 RouteSettings 或全局状态管理。
• 进阶优化：建议使用命名路由统一管理，并添加页面转场动画。

4. 运行与调试

• 启动设备：使用 Android 模拟器或连接真机（需开启开发者模式）。
• 运行项目：在 VS Code 中打开项目，按 F5 启动调试。
• 常见问题：
  • 设备未连接：运行 flutter devices 检查。
  • 热重载失效：确保代码修改在 build 或 setState 范围内，手动保存触发。
  • 参数传递错误：检查构造函数是否使用 required 关键字。

总结

本文通过环境搭建、计数器应用和多页面跳转案例，系统介绍了 Flutter 开发的核心概念，包括状态管理、组件分类和路由导航。初学者可在此基础上进一步学习状态管理库、网络请求等进阶内容，构建完整的 Flutter 技术栈。

注：本文内容基于实战编写，代码经过测试，可直接运行。如有疑问，欢迎参考官方文档或社区讨论。