2.4 初识Flutter工程

有了前面的Dart和Flutter的理论知识铺垫，接下来开始进入实战环节。首先介绍Flutter工程的组成结构。

2.4.1 Flutter工程结构特点

在第1章介绍了如何创建Flutter工程，工程创建好后，包含以下目录。

• /lib：存放Flutter应用代码，使用Dart语言进行开发。

• /android：原生Android壳工程，用于构建Android APK，在运行时，Android应用会自动加载Flutter应用代码并执行。

• /ios：原生iOS壳工程，用于iOS平台上运行Flutter应用。

Android、iOS原生工程涉及对应平台的原生开发技术。如在Android平台使用Kotlin、Java作为开发语言，使用Gradle进行依赖管理。iOS平台采用Swift、Objective-C作为开发语言，使用CocoaPods进行依赖管理。

对于Flutter开发而言，壳工程主要用来加载Flutter应用。在Flutter入门阶段，读者可以暂时忽略两个原生壳工程，将重点聚焦于/lib目录下的Flutter应用开发。

/lib/main.dart是应用的入口文件，其中包含main函数：

其中，引入了material包。runApp函数的作用是运行Flutter Framework，并接收一个组件，将其展示到屏幕上。

下面对main.dart中涉及的核心组件进行说明。

2.4.2 App组件——应用架构的基石

在Flutter中提供了WidgetsApp作为整个应用的根组件，它的作用是统一提供组成APP必不可少的基础架构组件。开发者只需要使用WidgetsApp作为根组件，整个APP中就可以直接使用路由导航、本地化、主题等功能。

MaterialApp是基于WidgetsApp的派生组件，它在WidgetsApp的基础之上实现了Material De-sign设计风格。除此之外，还有CupertinoApp，它基于WidgetsApp实现了iOS设计风格。在实际开发中，可以根据所需的设计风格进行选择。在本书中，将主要介绍MaterialApp组件的使用。

runApp接收组件MyApp，它的代码为：

其中，MyApp是一个无状态组件，它返回MaterialApp组件。MaterialApp基于WidgetsApp，集成了应用中所需的各种基本功能，如Navigator导航路由等，并支持对设计主题进行设置。

在MaterialApp的传入参数中，title指定应用名称，theme传入一个ThemeData实例，用于指定主题样式。home用于指定首页，代码中传入了MyHomePage。

2.4.3 Scaffold组件——页面的骨架

Scaffold组件提供了Material Design风格页面的布局框架，对常用的页面布局进行封装，比如标题栏、侧边导航抽屉、底部导航栏、snack bar、bottom sheets、FAB悬浮按钮等。开发者只要通过组件属性设置，就能够完成高质量Material Design页面开发。

MyHomePage是main.dart中默认创建的一个带有计数器功能的组件，其代码如下：

其中，MyHomePage是一个有状态组件，并定义了一个＿counter状态，用于统计按钮单击次数。

＿MyHomePageState返回中，包含Scaffold组件，这个组件定义了页面的整体框架。基于Scaffold可以方便地搭建好页面整体框架。如在上面代的码中，通过Scaffold的appBar指定了标题栏，通过body指定内容区域，通过floatingActionButton创建了一个FAB悬浮按钮。