Logo
Section 1 / 11

Hello Flutter App

在本节中,我们将为 Android 平台构建第一个 Flutter 应用程序。我们将创建一个简单的 Hello Flutter 应用,以初步了解 Flutter 应用开发。该应用将在设备屏幕中央显示一条问候语。在本节课中,我们将明确创建 Flutter 应用的目标。

导入

Hello Flutter App

在本节中,我们将为 Android 平台构建第一个 Flutter 应用程序。我们将创建一个简单的 Hello Flutter 应用,以初步了解 Flutter 应用开发。该应用将在设备屏幕中央显示一条问候语。在本节课中,我们将明确创建 Flutter 应用的目标。

Hello Flutter app

本节结束后,你将拥有一个适用于 Android 平台的 Flutter 应用程序,该应用程序将以两种语言显示问候消息。

此应用程序将显示英文和西班牙文。通过点击右上角的“刷新”图标,可以切换问候语。

显示的文本将居中位于屏幕中央。

学习目标

本节结束后,你将对 Flutter 应用开发有基本了解。我们将涵盖以下主题:

  1. 应用程序的入口点
  2. MaterialApp widget:应用的根组件
  3. Center widget:将内容居中于设备屏幕中间
  4. Scaffold widget:为应用提供结构框架
  5. SafeArea widget:帮助避免操作系统通知与应用组件重叠
  6. AppBar widget:标题、起始部分和操作项
  7. 组件类型:无状态 vs 有状态
  8. 添加一个图标按钮,用于在英文和西班牙文之间切换文本

我们将通过多次迭代构建“Hello Flutter App”,逐步理解每个构建模块。最终的应用程序效果如下所示:

Hello Flutter App: Clicking on refresh the icon changes greeting to Spanish.
Hello Flutter App: Clicking on refresh the icon changes greeting to Spanish.

在下一节课中,我们将着手创建一个 Flutter 应用程序,在设备屏幕中央渲染 "Hello Flutter !" 文本。

简介

Flutter App Anatomy