Flutter 第一个应用程序

17 Mar 2025 | 5 分钟阅读

在本节中，我们将学习如何在 Android Studio 中创建一个简单的应用程序，以了解 Flutter 应用程序的基础知识。要创建 Flutter 应用程序，请执行以下步骤

步骤 1：打开 Android Studio。

步骤 2：创建 Flutter 项目。要创建项目，请转到文件-> 新建->新建 Flutter 项目。以下屏幕有助于更清楚地理解它。

步骤 3：在下一个向导中，您需要选择 Flutter 应用程序。为此，选择 Flutter 应用程序-> 点击下一步，如下面的屏幕所示。

步骤 4：接下来，配置应用程序详细信息，如下面的屏幕所示，然后单击下一步按钮。

项目名称： 编写您的应用程序名称。

Flutter SDK 路径： <path_to_flutter_sdk>

项目位置： <path_to_project_folder>

描述： <一个新的 Flutter hello world 应用程序>。

步骤 5：在下一个向导中，您需要设置公司域名，然后单击完成按钮。

单击完成按钮后，需要一些时间来创建项目。创建项目后，您将获得一个具有最少功能的完全可用的 Flutter 应用程序。

步骤 6：现在，让我们检查 Flutter 项目应用程序的结构及其用途。在下图中，您可以看到 Flutter 应用程序结构的各种文件夹和组件，我们将在下面讨论。

.idea：此文件夹位于项目结构的顶端，它保存了 Android Studio 的配置。它无关紧要，因为我们不会使用 Android Studio，因此可以忽略此文件夹的内容。

.android：此文件夹包含一个完整的 Android 项目，用于在为 Android 构建 Flutter 应用程序时使用。当 Flutter 代码被编译成原生代码时，它将被注入到这个 Android 项目中，从而生成一个原生的 Android 应用程序。例如：当您使用 Android 模拟器时，此 Android 项目用于构建 Android 应用程序，然后将其部署到 Android 虚拟设备。

.ios：此文件夹包含一个完整的 Mac 项目，用于在为 iOS 构建 Flutter 应用程序时使用。它类似于用于开发 Android 应用程序的 android 文件夹。当 Flutter 代码被编译成原生代码时，它将被注入到这个 iOS 项目中，从而生成一个原生的 iOS 应用程序。只有在 macOS 上工作时，才有可能为 iOS 构建 Flutter 应用程序。

.lib：这是一个重要的文件夹，代表库。这是一个我们将完成 99% 项目工作的文件夹。在 lib 文件夹中，我们将找到包含 Flutter 应用程序代码的 Dart 文件。默认情况下，此文件夹包含文件 main.dart，它是 Flutter 应用程序的入口文件。

.test：此文件夹包含 Dart 代码，该代码是为 Flutter 应用程序编写的，用于在构建应用程序时执行自动化测试。这对于我们来说并不重要。

我们还可以在 Flutter 应用程序中包含一些默认文件。在 99.99% 的情况下，我们不会手动触及这些文件。这些文件是

.gitignore：这是一个文本文件，其中包含一个文件、文件扩展名和文件夹列表，告诉 Git 在项目中应该忽略哪些文件。 Git 是一个版本控制文件，用于跟踪软件开发期间源代码的更改 Git。

.metadata：这是由 flutter 工具自动生成的文件，用于跟踪 Flutter 项目的属性。此文件执行内部任务，因此您无需在任何时候手动编辑内容。

.packages：这是由 Flutter SDK 自动生成的文件，用于包含 Flutter 项目的依赖项列表。

flutter_demoapp.iml：它始终以 Flutter 项目的名称命名，其中包含项目的其他设置。此文件执行内部任务，由 Flutter SDK 管理，因此您无需在任何时候手动编辑内容。

pubspec.yaml：它是项目的配置文件，将在使用 Flutter 项目时大量使用。它允许您了解应用程序的工作方式。此文件包含

项目常规设置，如项目的名称、描述和版本。
项目依赖项。
项目资产（例如，图像）。

pubspec.lock：它是基于 .yaml 文件的自动生成的文件。它包含有关所有依赖项的更多详细设置。

README.md：这是一个自动生成的文件，其中包含有关项目的信息。如果我们要与开发人员共享信息，我们可以编辑此文件。

步骤 7：打开 main.dart 文件并将代码替换为以下代码片段。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World Flutter Application',
      theme: ThemeData(
        // This is the theme of your application.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Home page'),
    );
  }
}
class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  // This widget is the home page of your application.
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

步骤 8：让我们逐行理解上面的代码片段。

要开始 Flutter 编程，您首先需要导入 Flutter 包。在这里，我们导入了 Material 包。此包允许您根据 Android 规范的 Material 设计指南创建用户界面。
第二行是 Flutter 应用程序的入口点，类似于其他编程语言中的 main 方法。它调用 runApp 函数并传递 MyApp 的一个对象。此函数的主要目的是将给定的 Widget 附加到屏幕上。
第 5 行到第 18 行是一个用于在 Flutter 框架中创建 UI 的 Widget。在这里，StatelessWidget 不维护 Widget 的任何状态。MyApp 扩展了 StatelessWidget，它覆盖了其 build 方法。build 方法用于创建应用程序 UI 的一部分。在此块中，build 方法使用 MaterialApp，一个 Widget 来创建应用程序的根级 UI，并包含三个属性 - title、theme 和 home。
1. Title：它是 Flutter 应用程序的标题。
2. Theme：它是 Widget 的主题。默认情况下，它将蓝色设置为应用程序的整体颜色。
3. Home：它是应用程序的内部 UI，它为应用程序设置另一个 Widget (MyHomePage)。
第 19 行到第 35 行，MyHomePage 类似于 MyApp，只是它将返回 Scaffold. Scaffold Widget 是 MaterialApp Widget 之后用于创建用户界面的顶级 Widget。此 Widget 包含两个属性 appBar 和 body。appBar 显示应用程序的标题，body 属性显示应用程序的实际内容。在这里，AppBar 渲染应用程序的标题，Center Widget 用于将子 Widget 居中，而 Text 是用于显示文本内容的最终 Widget，并在屏幕中央显示。