创建应用

在 Flutter 教程的第一部分，你将构建名为「Birdle」的应用的核心 UI，这是一款类似于 Wordle，纽约时报的热门游戏 的游戏。

学完本教程后，你将掌握构建 Flutter UI 的基础知识，你的应用将与下面的截图相似（而且基本上还能正常运行 😀）。

构建 Flutter 应用的第一步是创建新项目。你可以使用随 Flutter SDK 一起安装的 Flutter CLI 工具 创建新应用。

打开终端或命令提示符，运行以下命令以创建新的 Flutter 项目：

$ flutter create birdle --empty

这将使用精简的「empty」模板创建一个新的 Flutter 项目。

在 IDE 中打开 lib/main.dart 文件。从文件顶部开始，你会看到以下代码。

void main() {
  runApp(const MainApp());
}

main 函数是任何 Dart 程序的入口点，而 Flutter 应用本质上就是一个 Dart 程序。 runApp 方法是 Flutter SDK 的一部分，它接受一个 widget 作为参数。此处传入的是 MainApp widget 的一个实例。

在 main 函数正下方，你会找到 MainApp 类的声明。

class MainApp extends StatelessWidget {
  const MainApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

MainApp 是 根 widget，因为它是传入 runApp 的 widget。在这个 widget 内部，有一个 build 方法，它返回名为 MaterialApp 的另一个 widget。本质上，Flutter 应用就是这样：由多个 widget 组合而成，构成称为 widget 树 的树形结构。

作为 Flutter 开发者，你的任务是将 SDK 中的 widget 组合成更大的自定义 widget，以展示 UI。

目前，widget 树相当简单：

1. 在终端中，进入你创建的 Flutter 应用的根目录：

   $ cd birdle
   

   content_copy

2. 使用 Flutter CLI 工具运行应用。

   $ flutter run -d chrome
   

   content_copy

   应用将在新的 Chrome 实例中构建并启动。

如果你还没听说过 有状态热重载，它可以让正在运行的 Flutter 应用在不到一秒内重新渲染更新后的业务逻辑或 UI 代码——而且不会丢失你在应用中的当前位置。

在 IDE 中打开 main.dart 文件，定位到约第 15 行，找到以下代码：

child: Text('Hello World!'),

将字符串中的文本改为你想要的任何内容。然后，在运行应用的终端中按 r 进行热重载。正在运行的应用应立即显示你更新后的文本。