Flutter 教程：你的第一个 Flutter 应用 "Hello World"

Zuckjet_
495 阅读8分钟

欢迎来到 Flutter 系列教程的第四站！在前面的章节中，我们已经成功安装了 Flutter SDK 并配置好了开发环境。现在，最激动人心的时刻到了——我们将创建、运行并亲手修改我们的第一个 Flutter 应用程序。本教程将引导您完成每一个步骤，即使您是编程新手，也能轻松跟上。

学习目标

  • 学会使用 VS Code 或命令行创建全新的 Flutter 项目。
  • 了解 Flutter 项目的基本文件结构。
  • 在模拟器、浏览器或真实设备上运行您的应用。
  • 修改代码，编写一个经典的 "Hello World" 程序。
  • 体验 Flutter 独有的 "热重载" (Hot Reload) 功能。

前提条件

在开始之前，请确保您已经完成了本系列教程的前几篇：

  • Flutter SDK 已经安装并配置好环境变量。
  • 您选择的 IDE (推荐 VS Code) 已经安装了 Flutter 和 Dart 插件。
  • flutter doctor 命令检测结果无严重错误 (issue)。

第一步：创建你的 Flutter 项目

创建 Flutter 项目有两种常用方式：通过 IDE (如 VS Code) 的图形化界面和通过命令行。我们推荐新手使用 VS Code，因为它更直观。

方法 A: 使用 VS Code 创建 (推荐)

  1. 打开 VS Code：启动您的 Visual Studio Code。

  2. 打开命令面板：使用快捷键 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (macOS) 来打开命令面板。

  3. 选择新建项目命令：在命令面板中，输入 Flutter，然后从下拉列表中选择 Flutter: New Project。

    (示意图)

  4. 选择项目模板：接着，选择 Application 模板。这是一个包含了基础代码的标准 Flutter 应用模板。

  5. 选择项目位置：VS Code 会让您选择一个文件夹来存放您的新项目。请选择一个您喜欢的位置 (例如 D:\flutter_projects\)。

  6. 命名你的项目：最后，为您的项目命名，例如 my_first_app。请注意：项目名称必须是小写字母和下划线的组合 (snake_case)，不能包含大写字母、空格或特殊字符。

    输入名称后按回车，VS Code 会自动执行 flutter create 命令，并为您生成一个完整的项目。这个过程可能需要几十秒，请耐心等待。完成后，VS Code 会自动打开这个项目。

方法 B: 使用命令行创建

如果您更喜欢使用终端，这也是一个非常简单直接的方式。

  1. 打开终端：在 Windows 上是 CMD 或 PowerShell，在 macOS/Linux 上是 Terminal。
  2. 进入工作目录：使用 cd 命令切换到您想存放项目的文件夹。 
    cd D:\flutter_projects
  3. 执行创建命令：运行以下命令来创建项目。 
    flutter create my_first_app
    执行完毕后，您会在当前目录下看到一个名为 my_first_app 的新文件夹。然后您可以使用 VS Code 打开这个文件夹 (File > Open Folder...)。

第二步：认识你的项目结构

项目创建成功后，您会在左侧文件浏览器看到很多文件和文件夹。别担心，作为新手，我们初期只需要关注一两个核心文件。

my_first_app/
├── android/            <-- Android 原生项目代码
├── ios/                <-- iOS 原生项目代码
├── lib/                <-- Dart 源代码文件夹 (我们的主战场)
│   └── main.dart       <-- 应用的入口文件！
├── test/               <-- 测试代码文件夹
└── pubspec.yaml        <-- 项目配置文件 (管理依赖、字体、图片等)
  • lib/main.dart: 这是您 Flutter 应用的入口文件，绝大部分的编程工作都会在这里或 lib 文件夹下的其他 .dart 文件中进行。
  • pubspec.yaml: 这是 Flutter 项目的"说明书"，用来管理第三方库 (packages)、字体、图片资源等。
  • android/ 和 ios/: 这两个文件夹包含了原生平台的项目文件。初期我们完全不需要动它们，Flutter 会在构建时自动处理。

第三步：运行你的应用

现在，让我们把这个默认创建的应用跑起来看看。

  1. 选择目标设备：在 VS Code 的右下角状态栏，您会看到一个设备选择区域。点击它，您可以选择一个已连接的设备来运行您的应用。

    • 启动模拟器：如果您尚未启动 Android 模拟器或 iOS 模拟器，可以打开 Android Studio 的 Virtual Device Manager 或通过 open -a Simulator (macOS) 命令来启动一个。启动后，它应该会出现在设备列表中。
    • 连接真实设备：用 USB 线连接您的 Android 或 iPhone。请确保您已经开启了 "开发者模式" 和 "USB 调试" (Android) 或已经在 Xcode 中信任了设备 (iOS)。
    • Web 浏览器：您也可以选择 Chrome 或 Edge，这会将您的应用作为网页运行。

    (示意图)

  2. 开始运行 (调试模式)：

    • 在 VS Code 中，最简单的方式是直接按 F5 键，或者点击顶部菜单的 Run > Start Debugging。
    • Flutter 会开始编译您的应用并将其安装到您选择的设备上。第一次启动会比较慢，因为它需要编译和打包很多东西。请耐心等待。
    • 成功后，您会在设备上看到一个默认的计数器应用。您可以点击右下角的 + 按钮，看到屏幕上的数字增加。

恭喜！您已经成功运行了您的第一个 Flutter 应用！

第四步：编写你的 "Hello World"

默认的计数器应用很酷，但现在让我们把它改成一个更经典的 "Hello World" 程序。

  1. 打开 lib/main.dart 文件。
  2. 清空所有代码：按 Ctrl+A (或 Cmd+A) 全选，然后按 Delete 删除所有默认代码。
  3. 粘贴以下完整代码：将下面的代码完整地复制并粘贴到 main.dart 文件中。
// 引入 Flutter 的 Material UI 设计库
import 'package:flutter/material.dart';

// 这是 Dart 应用的主入口函数，和 C++、Java 的 main 函数类似
void main() {
  // runApp 是 Flutter 框架的入口，它会接收一个 Widget 作为参数并将其渲染到屏幕上
  runApp(const MyApp());
}

// 我们的应用本身也是一个 Widget。这里我们继承 StatelessWidget
// StatelessWidget 是一种自身不包含状态的静态 Widget
class MyApp extends StatelessWidget {
  // `const` 构造函数，用于提高性能
  const MyApp({super.key});

  // 每个 Widget 都必须实现一个 build 方法
  // 这个方法描述了 Widget 的 UI 应该如何构建，当 Widget 需要被渲染时，Flutter 会调用它
  @override
  Widget build(BuildContext context) {
    // MaterialApp 是一个实现了 Material Design 风格的应用顶层 Widget
    // 它包含了路由、主题等很多基础功能
    return MaterialApp(
      // debugShowCheckedModeBanner: false 可以去掉右上角的 "DEBUG" 标签
      debugShowCheckedModeBanner: false,
      // `home` 属性定义了应用的首页
      home: Scaffold(
        // Scaffold 是 Material Design 布局的基本骨架，提供了 App Bar、背景颜色、浮动按钮等
        appBar: AppBar(
          // appBar 是顶部的应用栏
          title: const Text('My First App'), // 设置应用栏的标题
        ),
        // `body` 是页面的主要内容区域
        body: const Center(
          // Center 是一个布局 Widget，它会将其子 Widget 居中显示
          child: Text(
            'Hello, World!', // 这是我们想在屏幕中央显示的文本
            style: TextStyle(fontSize: 24), // 给文本设置一个大一点的字号
          ),
        ),
      ),
    );
  }
}

我已经在这份代码中加入了详细的注释，来解释每一个部分的作用。这对理解 Flutter 的基础结构非常有帮助。

第五步：体验魔法：热重载 (Hot Reload)

这是 Flutter 最令人兴奋的功能之一！

  1. 保存文件：在粘贴完新代码后，直接按下 Ctrl+S (或 Cmd+S) 保存 main.dart 文件。
  2. 见证奇迹：观察您的模拟器或设备，您会发现应用界面几乎是瞬间就从之前的计数器应用更新为了我们刚刚编写的 "Hello World" 界面！

这个过程被称为 热重载 (Hot Reload)。它可以在不重启应用、不丢失当前状态的情况下，将您修改的代码实时注入到正在运行的 Dart 虚拟机中，从而立刻看到 UI 的变化。这极大地提高了开发和调试效率。

试一试！

  • 将 Hello, World! 修改为 你好, Flutter!。
  • 将 AppBar 的标题 My First App 修改为 我的第一个应用。
  • 每次修改后，只需保存文件，即可立即看到效果。

小知识：热重载 vs 热重启

  • 热重载 (Hot Reload)：速度极快，保留应用状态，用于 UI 布局和逻辑的快速迭代。快捷键是 Ctrl+S 保存或闪电图标。
  • 热重启 (Hot Restart)：速度比完全重启快，但会重置应用状态。当您修改了会影响状态的深层代码时使用。快捷键是 Ctrl+Shift+F5 或重启图标。

总结

太棒了！在本篇教程中，您不仅成功创建并运行了您的第一个 Flutter 应用，还亲手编写了 "Hello World" 程序，并体验了 Flutter 强大的热重载功能。您已经迈出了 Flutter 开发中最坚实的一步。

我们回顾一下学到的知识点：

  • 使用 flutter create 或 VS Code 命令面板创建项目。
  • 应用的主要代码位于 lib/main.dart。
  • 使用 F5 启动调试，并在设备选择器中选择目标设备。
  • MaterialApp, Scaffold, AppBar, Center, Text 是构成页面的基本 Widgets。
  • 保存代码即可触发热重载，实时预览 UI 变更。

在下一篇文章中，我们将深入探讨 Dart 语言的基础语法，为后续学习 Flutter 的各种组件和功能打下坚实的基础。继续保持这份热情，我们下一篇再见！

avatar
文章
阅读
粉丝