介绍
经过上一篇 Flutter Web 的介绍以及环境配置 我知道， Flutter Web 项目比不支持 Web 的项目多了一些文件。这些文件的作用是什么？下面我们就探究一下。
Flutter Web 项目结构
一、目录结构图
![目录结构图]
从上图我们看到在不打开一些文件夹时，Flutter Web 项目一共有 14 个；而不支持 Flutter Web 项目有 11 个。两个对比如下：
从上图看到多出的文件是 .idea 、web 、flutterapp.iml 三个文件。
二、.idea 文件夹内容介绍
1、 文件夹包含内容如下图所示：
-
libraries 文件夹
libraries 文件夹 主要是一些库的引入路径管理文件。该文件家夹下有 Dart_SDK.xml 和 KotlinJavaRuntime.xml 两个文件。
1、Dart_SDK.xml
主要是dart-sdk/lib 下的一些库路径管理。如下图所示:
Dart_SDK.xml 内容
2、KotlinJavaRuntime.xml
主要是安卓 Kotlin Runtime 相关的一些 jar 包和资源，如下图所示：
KotlinJavaRuntime.xml 内容 -
runConfigurations 文件夹
该文件夹主是Flutter Web 项目运行的配置管理文件存放处。包含 main_dart.xml 文件。
其中 main_dart.xml 的内容如下图所示：
main_dart.xml 内容
从上图我们可以看到，main_dart.xml 的主要功能是配置 Flutter Web 项目启动那个main.dart 文件（因为在 ****Flutter Web*** 刚出现的时候，项目的 web 目录下也会有一个 main.dart 文件）。 -
modules.xml 文件
这个文件主要是项目引入模块的管理文件。内容如下：
modules.xml 内容 -
workspace.xml 文件
这个主要是项目的工作空间配置文件。内容如下：
workspace.xml 内容
三、android、ios 文件夹
这两个文件夹下内容主要是 android、ios 两个平台的项目基础代码。如下图所示：
四、lib 文件夹
该文件夹是我们后期开发项目代码以及资源等存放处。该文件夹下包含main.dart 文件。
如下图所示：
五、web 文件夹
这是Flutter Web 项目生成的文件夹，里面内容如下图：
icons 和 favicon 图标
这两个是 Flutter Web 项目使用的图标资源。
Icon-xx.png 是项目图标
favicon 是浏览器标题图标index.html 文件
这是Web 的入口文件，主要是配置项目，有 js引入、显示设置、flutter_service_worker.js 的注册等-
manifest.json 文件
这是项目显示配置。主要有 主体颜色、项目名字、简称、描述，资源等，如下图所示：
manifest.json 内容
六、flutterapp.xml 文件
该文件是新module 根管理文件，内容如下：
七、Flutter Web 的应用
创建一个列表，在lib 文件夹下的 main.dart 文件修改如下：
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Web',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Web List"),
),
body: Container(
child: ListView.builder(
itemBuilder: (content, index) {
return ListTile(
title: Text("$index"),
);
},
itemCount: 10,
),
),
);
}
}
效果：
