flutter_creating_simple_application

创建一个简单的应用

在本章中，我们将创建一个基本的 Flutter 应用，以理解项目结构和涉及的基本概念。我们将使用 Android Studio（已安装 Flutter 插件），但在 VS Code 中的过程类似。

步骤 1：创建一个新的 Flutter 项目

打开 Android Studio。
点击 File（文件）-> New（新建）-> New Flutter Project...（新建 Flutter 项目…）（或者如果是首次，点击 New Project...（新建项目…）并选择 Flutter）。
在左侧的项目类型列表中选择 Flutter。
确保 Flutter SDK path（Flutter SDK 路径）指向你安装的 Flutter SDK 目录。
点击 Next（下一步）。

步骤 2：配置项目

输入以下详细信息：

项目名称： 使用描述性名称，遵循 Dart 包命名约定（使用下划线的小写字母）。例如，我们使用 hello_flutter_app。
项目位置： 选择你的项目保存位置。
描述： 简要描述（例如，一个简单的 Flutter Hello World 应用）。
项目类型： 选择 Application（应用，默认）。
组织： 使用反向域名表示法（例如，com.example，com.yourcompany）。这用于 Android 上的包名和 iOS 上的 Bundle ID。我们使用 com.example.helloflutterapp。
平台： 选择你希望定位的平台（Android、iOS、Web 等）。

点击 Finish（完成）（或 Create（创建））。

步骤 3：创建项目

Android Studio（或 VS Code）现在将创建一个包含默认计数器应用的 Flutter 项目。此过程可能需要一分钟，因为它会获取依赖项（dependencies）。

步骤 4：理解项目结构

让我们看看生成的关键文件和目录：

android/： 包含 Android 特定的项目文件。你需要在此编辑文件进行平台特定配置（例如，AndroidManifest.xml，build.gradle）。
ios/： 包含 iOS 特定的项目文件。你将在此编辑文件（例如，Info.plist，Podfile），或者在 Xcode 中打开 Runner.xcworkspace 进行 iOS 配置。
lib/： 这是你大部分 Dart 代码所在的位置。
- main.dart： 你的 Flutter 应用的入口文件（entry point）。执行从此开始。
test/： 包含用于编写自动化测试（单元测试 unit test，部件测试 widget test，集成测试 integration test）的文件。
- widget_test.dart：一个部件测试示例文件。
.gitignore： 指定 Git 应忽略的有意未跟踪的文件。
pubspec.yaml： 关键的项目元数据文件（metadata file）。 由 Pub 包管理器（package manager）使用。定义项目名称、描述、版本、依赖项（dependencies）（你的应用使用的包 package）、资源文件（assets）（如图标、字体等）等等。
pubspec.lock： 自动生成的文件，锁定正在使用的依赖项（dependencies）的具体版本。
README.md： 一个 Markdown 文件，用于描述你的项目。

步骤 5：探索 `main.dart`（默认计数器应用）

打开 lib/main.dart。默认代码创建一个简单的有状态（stateful）应用，其中计数器在点击按钮时增加。我们将替换这段代码，但了解其结构是有益的。

步骤 6：创建一个“Hello World”应用

用以下更简单的代码替换 lib/main.dart 的全部内容：

// 导入 Flutter 框架的 Material 库。
import 'package:flutter/material.dart';

// main 函数是所有 Flutter 应用的入口点。
void main() {
  // runApp() 膨胀给定的 widget 并将其附加到屏幕上。
  runApp(const MyApp()); // 如果 widget 是常量，使用 'const' 以提高性能。
}

// MyApp 是应用的根 widget。
// 它继承自 StatelessWidget，因为其内容不会在内部改变。
class MyApp extends StatelessWidget {
  // 构造函数（StatelessWidget 所需）。
  const MyApp({super.key}); // 使用 super.key 转发 key。

  // build 方法描述了如何显示 widget。
  // 当 widget 需要渲染时，由框架调用此方法。
  @override
  Widget build(BuildContext context) {
    // MaterialApp 是一个便捷 widget，它包装了许多 widget
    // Material Design 应用中常用的 widget。
    return MaterialApp(
      // 设备任务切换器使用的标题。
      title: 'Hello Flutter App',
      // Theme data 定义了视觉外观（颜色、字体等）。
      theme: ThemeData(
        primarySwatch: Colors.blue, // 设置主色板。
        // 使用 ColorScheme 的新方法：
        // colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        // 选用 Material 3 设计
      ),
      // 应用默认路由（主屏幕）的 widget。
      home: const MyHomePage(title: 'Hello Flutter'), // 将 title 传递给主页。
    );
  }
}

// MyHomePage 是主屏幕的 widget。
// 这里它也是 StatelessWidget，因为其内容是静态的。
class MyHomePage extends StatelessWidget {
  // 构造函数接受一个 title 和一个 key。
  const MyHomePage({super.key, required this.title});

  // 'final' 意味着此变量在对象创建后不会改变。
  final String title;

  @override
  Widget build(BuildContext context) {
    // Scaffold 实现了基本的 Material Design 视觉布局结构。
    return Scaffold(
      // AppBar 是顶部的应用栏。
      appBar: AppBar(
        // 在 AppBar 中显示的标题。
        title: Text(title), // 使用传递给 widget 的标题。
      ),
      // body 是 Scaffold 的主要内容。
      body: const Center( // Center widget 将其子 widget 居中。
        // Text widget 显示文本字符串。
        child: Text(
          'Hello, World!',
          style: TextStyle(fontSize: 24), // 可选的样式。
        ),
      ),
    );
  }
}

代码解释

import 'package:flutter/material.dart';：导入 Material Design 库，提供了像 MaterialApp、Scaffold、AppBar、Text 等 widget。
void main() => runApp(const MyApp());：应用的入口点（entry point）。runApp 接受根 widget（MyApp）并使其成为 widget 树（widget tree）的根。
MyApp extends StatelessWidget：定义根 widget。它是无状态的（stateless），因为它只构建一个 MaterialApp，不管理任何内部变化的数据。
@override Widget build(BuildContext context)：每个 widget 都必须实现一个 build 方法。它接收 BuildContext（关于 widget 在树中位置的信息）并返回其渲染的 widget(s)。
MaterialApp：配置 Material Design 应用的顶层方面，包括主题（theme）、标题（title）和主屏幕（home screen）。
MyHomePage extends StatelessWidget：定义主屏幕 widget。它接受一个 title 参数。
Scaffold：提供标准的移动应用布局结构（AppBar、body 等）。
AppBar：屏幕顶部的栏。
Center：一个布局 widget，将其子 widget 居中。
Text：一个显示文本的 widget。

步骤 7：运行应用

确保你已连接设备（物理设备 physical device 或模拟器 emulator/模拟机 simulator），并在 Android Studio/VS Code 的设备下拉菜单中选中该设备。
点击“运行”按钮（绿色播放图标）或按下 Shift+F10（Android Studio 默认）或 F5（VS Code 默认）。
Flutter 将在选定的设备上构建（build）并安装（install）应用。

步骤 8：查看输出

设备应显示应用，其中 AppBar 标题为“Hello Flutter”，且“Hello, World!”文本居中显示在 body 中。

这个简单的例子涵盖了基本的工作流程：创建项目、理解结构、编写基本的 widget 代码以及运行应用。