每天一个Flutter开发小项目 (1) : 快速搭建你的第一个 Flutter 计数器应用

本文链接：https://blog.youkuaiyun.com/m0_64916781/article/details/145802850

引言

欢迎来到 每天一个Flutter开发小项目 系列博客！在这个系列中，我们将每天通过构建一个实用且有趣的小型 Flutter 应用，带您逐步领略 Flutter 移动开发框架的魅力。 Flutter 以其跨平台、高性能、和美观的用户界面而著称，已经成为现代移动应用开发的热门选择。我们的目标是通过实践项目，让您不仅掌握 Flutter 的技术细节，更能深刻体会到 Flutter 在提升开发效率和应用性能方面的强大优势。

今天，作为本系列的第一篇，我们将从一个最基础但又非常经典的项目开始： 计数器应用。这个项目麻雀虽小，五脏俱全，它将帮助您快速上手 Flutter 开发，并对 Flutter 的核心概念，如 Widget（组件）、状态管理、用户交互 等，有一个初步的认识。

项目简介：计数器应用

计数器应用的功能非常简单明了：界面上显示一个数字，并提供一个按钮，每次点击按钮，数字就会加一。这是一个看似简单的应用，但它非常适合作为 Flutter 入门项目，因为它：

功能明确: 逻辑简单，易于理解和实现。
涵盖核心概念: 涉及到 Flutter UI 构建、状态管理、事件处理等基础知识。
快速上手: 几分钟即可完成，快速体验 Flutter 开发的乐趣。

通过构建这个计数器应用，您将初步体验到 Flutter 的以下优势：

热重载 (Hot Reload): 快速预览代码修改后的效果，极大地提升开发效率。
声明式 UI 编程: 通过描述 UI 的状态来构建界面，代码简洁易懂。
跨平台开发: 一套代码可以同时运行在 iOS 和 Android 平台，节省开发成本。

实战步骤：一步步构建计数器应用

接下来，让我们一步步开始构建我们的第一个 Flutter 应用 - 计数器应用。

步骤 1：创建新的 Flutter 项目

首先，确保您已经安装了 Flutter 开发环境。如果您还没有安装，请参考 Flutter 官方文档进行安装配置。安装完成后，打开您的终端或命令提示符，运行以下命令创建一个新的 Flutter 项目，我们命名为 flutter_counter_app:

flutter create flutter_counter_app
cd flutter_counter_app

这个命令会创建一个名为 flutter_counter_app 的 Flutter 项目，并自动生成一些基础代码文件。进入项目目录后，我们就可以开始编辑代码了。

步骤 2：构建基本的 UI 结构

打开项目中的 lib/main.dart 文件，这是 Flutter 应用的入口文件。我们将修改 MyHomePage Widget 来构建我们的计数器应用界面。首先，我们需要一个 AppBar 作为应用顶部的标题栏，以及一个 Center 组件来将内容居中显示，并在中心放置一个 Column 组件，用于垂直排列我们的文本显示数字和按钮。

修改 MyHomePage 的 build 方法如下:

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 App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter 计数器应用'), // 修改 title
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0; // 定义计数器变量

  void _incrementCounter() { // 定义计数器增加方法
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title), // 使用 widget.title
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '您点击按钮的次数:',
            ),
            Text(
              '$_counter', // 显示计数器数值
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton( // 添加 FloatingActionButton
        onPressed: _incrementCounter, // 绑定点击事件
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

代码解释:

MaterialApp: Flutter 应用的基本 Widget，它设置了应用的 Material Design 风格主题。
Scaffold: 提供了基本的应用框架结构，包括 AppBar, Body, FloatingActionButton 等。
AppBar: 应用顶部的标题栏，我们设置了标题为 widget.title，即 MyHomePage 组件传入的 title 参数。
Center: 将 Column 组件居中显示在屏幕中央。
Column: 垂直排列子组件，我们放置了两个 Text 组件，分别显示提示文本和计数器的数值。
FloatingActionButton: 悬浮在界面右下角的按钮，我们将在下一步中绑定点击事件。
_counter 变量: 在 _MyHomePageState 类中定义了一个私有变量 _counter 用于存储计数器的数值，初始值为 0。
_incrementCounter 方法: 定义了一个私有方法 _incrementCounter，当按钮被点击时调用，使用 setState(() { ... }); 来更新 _counter 的值，并通知 Flutter 框架重新构建 UI。

步骤 3：运行应用，体验热重载

保存 main.dart 文件，然后在终端或命令提示符中运行以下命令启动应用：

flutter run

根据您的设备选择，可以选择在连接的真机设备或模拟器上运行。应用启动后，您应该能看到一个简单的界面，顶部显示标题 “Flutter 计数器应用”，中间显示 “您点击按钮的次数: 0”，右下角有一个加号按钮。

现在，尝试修改 Text 组件的文本内容，例如将 “您点击按钮的次数:” 修改为 “点击次数:”。保存 main.dart 文件，您会惊喜地发现， 无需重新编译和安装应用，应用界面上的文本内容立即发生了改变！这就是 Flutter 的 热重载 (Hot Reload) 功能，它允许开发者在代码修改后几乎立即看到效果，极大地提升了开发效率。

步骤 4：实现计数器逻辑

现在，我们需要将 FloatingActionButton 的点击事件与计数器逻辑关联起来。我们已经在 _MyHomePageState 类中定义了 _counter 变量和 _incrementCounter 方法。接下来，我们需要将 FloatingActionButton 的 onPressed 属性绑定到 _incrementCounter 方法，并将 Text 组件的文本内容动态显示 _counter 的值。

我们已经在上面的代码中完成了这一步，再次回顾一下关键代码:

FloatingActionButton(
  onPressed: _incrementCounter, // 绑定点击事件
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),
Text(
  '$_counter', // 显示计数器数值
  style: Theme.of(context).textTheme.headlineMedium,
),

FloatingActionButton 的 onPressed 属性被设置为 _incrementCounter 方法，当按钮被点击时， _incrementCounter 方法会被调用，增加 _counter 的值，并使用 setState 通知 Flutter 框架更新 UI。 Text 组件使用字符串插值 $_counter 来显示 _counter 的当前值。

步骤 5：再次运行应用，体验计数功能

重新运行应用 (或者热重启，如果应用已经在运行)，现在，点击右下角的加号按钮，您会看到界面上的数字从 0 开始递增！恭喜您，您已经成功构建了您的第一个 Flutter 应用 - 计数器应用！

Flutter 优势展现

在这个简单的计数器应用项目中，我们已经初步体验到了 Flutter 的一些显著优势：