
1.3 Flutter项目文件结构
利用IDE平台创建Flutter项目后,IDE中的项目文件中就会自动生成android、build、ios、test、lib、pubspec.yaml等文件和文件夹。这些文件和文件夹有什么作用?本节将主要进行介绍。如图1-22所示为Flutter项目文件结构。
下面介绍几种主要的项目文件,每种文件的作用说明见表1-1。
表1-1 Flutter主要的项目文件

下面介绍Flutter框架项目的主要代码功能。
1.入口函数
项目入口函数在lib/main.dart中,main方法就是入口函数,默认的箭头函数返回一个Widget,MyApp就是用户要展示的启动界面,如下代码所示。

上面代码中是箭头函数,上面的代码相当于:

Dart相关语法将在第2章详细讲解。

图1-22 Flutter项目文件结构
2.StatelessWidget类
StatelessWidget和StatefulWidget是Flutter的两个重要的组件,StatelessWidget用在控件不包含状态信息的情况,它不会依赖其他配置信息,例如文本控件(Text)、图像控件(ImageView),因而不会在运行过程中改变。相反,如果控件是一些用户交互控件或者随着网络变化,控件状态则有所改变,这样的情况就需要使用StatefulWidget。

上面代码片段写了一个MyApp类继承StatelessWidget类,然后重写build( )方法,返回一个MaterialApp对象。
3.Material组件
Material应用程序以MaterialApp Widget开始,该Widget在应用程序的根部创建了一些有用的widget。Material组件实现了视觉、效果、motion-rich(指丰富的Material动画效果)的Widget。包括App结构和导航、输入框和选择框、对话框、Alert、Panel、信息展示、布局等。因此实现这些App基本组件基本都需要这个Material组件。下面代码是利用VSCode自动构建的Flutter项目。


项目运行结果如图1-16所示。需要注意下面几点:
● 第1行代码是导入包,如果要使用Material组件,就需要导入Material包。
● 第14行StatefulWidget组件表示需要加入动态组件,主要是实现一个单击+按钮,实现动态数字加1计数效果。
● StatelessWidget组件主要实现一个home主题效果,实现了无状态的组件。
● MyApp类代表Flutter应用,它继承了StatelessWidget类,这也就意味着应用本身也是一个Widget。
● MaterialApp是Material库中提供的Flutter App框架,通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个Widget。
● Scaffold是Material库中提供的页面脚手架,它包含导航栏和Body以及FloatingActionButton(如果需要的话),路由默认都是通过Scaffold创建。