Flutter Web 项目文件介绍

介绍

经过上一篇 Flutter Web 的介绍以及环境配置 我知道， Flutter Web 项目比不支持 Web 的项目多了一些文件。这些文件的作用是什么？下面我们就探究一下。

Flutter Web 项目结构

一、目录结构图

![目录结构图] image.png

从上图我们看到在不打开一些文件夹时，Flutter Web 项目一共有 14 个；而不支持 Flutter Web 项目有 11 个。两个对比如下：

是否支持 Web 的对比

从上图看到多出的文件是   .idea 、web 、flutterapp.iml   三个文件。

二、.idea 文件夹内容介绍

1、 文件夹包含内容如下图所示：

.idea 文件夹

• 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 两个平台的项目基础代码。如下图所示：

android / ios 基础内容

四、lib 文件夹

该文件夹是我们后期开发项目代码以及资源等存放处。该文件夹下包含main.dart 文件。
如下图所示：

lib 文件夹

五、web 文件夹

这是Flutter Web 项目生成的文件夹，里面内容如下图：

web 文件夹

• icons 和 favicon 图标
  这两个是 Flutter Web 项目使用的图标资源。
  Icon-xx.png 是项目图标
  favicon 是浏览器标题图标

• index.html 文件
  这是Web 的入口文件，主要是配置项目，有 js引入、显示设置、flutter_service_worker.js 的注册等

• manifest.json 文件
  这是项目显示配置。主要有 主体颜色、项目名字、简称、描述，资源等，如下图所示：
  

  manifest.json 内容

六、flutterapp.xml 文件

该文件是新module 根管理文件，内容如下：

flutterapp.xml

七、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,
        ),
      ),
    );
  }
}

效果：

修改效果