『Flutter』还原初始程序

1.前言

经过上一篇文章，开发出来了第一个 Flutter 程序，入门程序 Hello World，这一篇文章就是接着上一篇。咱们来还原初始程序（开发第二个 Flutter 程序）。

2.尝试阅读官方示例代码

先从 runApp(const MyApp()); 这个代码开始，传递了一个 MyApp 组件，该组件继承了 StatelessWidget，实现了 build 方法，在 build 方法中返回了一个 MaterialApp 组件，但是这个 MaterialApp 组件我不知道，所以这里我给大家两种方式去学习，第一种就是去看官方文档，我这里就采用第二种直接问 AI：

有几句话非常的重要：

3.MaterialApp

1. MaterialApp 是一个方便的小部件，它封装了应用程序实现 Material Design 所需的一些小部件。什么是 Material Design？请看：https://material.io/design。就是提供了一些遵循了 Flutter 的规范的一些组件。
2. MaterialApp 组件是在 Flutter 应用程序的顶层使用，所以说我们在 runApp 方法中传递的 MyApp 组件，MyApp 就是返回的 MaterialApp 组件，所以说 MaterialApp 组件是在 Flutter 应用程序的顶层使用的。

通过 AI，知道了 MaterialApp 组件是在 Flutter 应用程序的顶层使用的，还有一些 Material Design 的常用属性：

1. home: 应用的首页，通常是一个 Scaffold 小部件。
2. theme: 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
3. title: 应用程序的标题，显示在任务管理窗口中。 ...

先介绍这两个属性，紧接着我们先来编写代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    // 应用程序的标题，显示在任务管理窗口中。
    title: "my App",
    // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
    theme: ThemeData(primarySwatch: Colors.blue),
    // 应用的首页
    home: Text(
      'Hello World',
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      style: const TextStyle(fontWeight: FontWeight.bold),
    ),
  ));
}

运行程序，效果如下：

不过运行起来我发现这个程序显示的结果不是我想要的，文字是颜色居然是红色，还在黄色下划线，这是为什么呢？这个颜色其实就是 MaterialApp 设置的，那么为什么会这样设置呢？这个时候就要打开 MaterialApp 的官方文档来一探究竟了：https://api.flutter-io.cn/flutter/material/MaterialApp-class.html

MaterialApp configures its WidgetsApp.textStyle with an ugly red/yellow text style that's intended to warn the developer that their app hasn't defined a default text style. Typically the app's Scaffold builds a Material widget whose default Material.textStyle defines the text style for the entire scaffold.

大概意思就是说 MaterialApp 组件会配置它的 WidgetsApp.textStyle，这个 textStyle 是一个丑陋的红色/黄色的文本样式，旨在警告开发人员他们的应用程序没有定义默认文本样式。通常，应用程序的 Scaffold 构建一个 Material 小部件，其默认 Material.textStyle 定义整个脚手架的文本样式。

4.Scaffold

说明什么说明我们的 MeterialApp 组件使用成功了，但是通过我询问 AI, AI 告诉我 home 属性是应用的首页，通常是一个 Scaffold 小部件，我观察官方也是使用的 Scaffold 小部件，那么我们就来使用 Scaffold 小部件, 但是呢我对 Scaffold 小部件不是很了解，所以我还是去询问 AI：

通过 AI 得知, Scaffold 小部件是一个 Material Design 布局结构的基本实现，常用的属性已经告诉我们了。所以我们可以使用 Scaffold 小部件来实现 Material Design 布局结构，那么我们就来使用 Scaffold 小部件：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
        appBar: AppBar(
          title: const Text('首页'),
          centerTitle: true,
        ),
        body: const Center(
          child: Text(
            'Hello Flutter',
            style: TextStyle(fontSize: 20.0),
          ),
        )
      )
  ));
}

运行程序，效果如下：

5.总结

通过这篇文章，我们学习了 MaterialApp 和 Scaffold 组件，以及它们的常用属性，以及如何去查看官方文档，如何去询问 AI，如何去阅读官方示例代码。

知道了 MaterialApp 组件是在 Flutter 应用程序的顶层使用的，Scaffold 小部件是一个 Material Design 布局结构的基本实现，常用的属性不知道的可以去查看官方文档或者询问 AI。

到此为止，我们的第二个 Flutter 程序就开发完成了，已经和官方创建项目模板的代码基本大概差不多了。

End

• 🐤如果您对本文有任何疑问或想法，请在评论区留言，我将很乐意与您交流。
• 🐰您的每一条评论对我都至关重要，我会尽快给予回复。
• 🎈如果您觉得这篇文章对您有所启发或帮助，请不吝赞赏、收藏或分享。
• 🎁您的每一个动作都是对我创作的最大鼓励和支持。
• 👍谢谢您的阅读和陪伴！

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！