flutter 项目目录架构 flutter 目录结构

转载

梦里忧郁 2023-12-01 12:05:47

文章标签 flutter 项目目录架构 flutter 配置文件 android 文章分类 架构后端开发

目录结构详解

这一节主要记录一下Flutter项目的目录结构及配置文件，为以后学习做个铺垫。将从以下几个方面做记录:

Flutter项目结构
Flutter配置文件

2.1.1 Flutter项目结构

先来看一下新建一个Flutter项目之后生成的目录结构图

flutter 项目目录架构 flutter 目录结构_flutter 项目目录架构

可以看到，一个完整的Flutter主要有以下几个组成部分:

android 目录
ios 目录
lib 目录
test 目录

android 目录

看一下android目录都包含哪些东西？

flutter 项目目录架构 flutter 目录结构_配置文件_02

我们可以看到，这个android目录其实就是一个完整的android项目，里边的组织结构和用AndroidStudio直接创建的Android项目是一样的。代码最终会被编译成Android平台运行的代码,入口文件是MainActivity.kt或者MainActivity.java

ios 目录

ios目录和android目录一样，存放的是IOS的项目文件，也是一个完整的IOS项目，可以在Xcode上进行开发、编译、调试等操作。

lib 目录

lib目录存放的是实现项目核心逻辑的dart文件，新创建的Flutter项目会默认有一个main.dart文件作为项目的入口文件。lib包下的代码文件最终会被渲染到android和ios两个平台。

test 目录

test目录主要存放测试代码，比如测试UI、数据等等，默认有一个widget_test.dart文件,可以单独运行这个dart测试文件进行测试。

2.1.2 Flutter配置文件

pubspec.yaml文件

这个文件是整个Flutter项目的配置文件，类似Android项目中的build.gradle文件。我们可以通过这个文件配置FlutterSDK,图片、字体、插件等内容。文件内容使用YAML格式的语法通过缩进的形式生成目录，其内容如下:

//应用名
name: flutter_app
//应用描述
description: A new Flutter application.

//版本号，区分Android和IOS
//+号前，对应android的versionName,IOS的CFBundleShortVersionString
//+号后，对应android的versionCode,IOS的CFBundleVersion
version: 1.0.0+1

//编译要求的dart版本号区间
environment:
  sdk: ">=2.7.0 <3.0.0"

//插件库 https://pub.dartlang.org/flutter
dependencies:
  flutter:
    sdk: flutter

//引用插件库
  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
//使用Material风格的图标和文字
  uses-material-design: true

//引入图标
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

//引入字体
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700

在配置文件中引用某个插件之后，如何将这个插件真正添加到项目中呢? 可以做个小测试:
在配置文件中引入flutter_webview_plugin这个插件，在添加之前先看一下GeneratedPluginRegistrant这个类中的内容

@Keep
public final class GeneratedPluginRegistrant {
  public static void registerWith(@NonNull FlutterEngine flutterEngine) {
  }
}

这个类在项目刚刚创建的时候只是注册了Flutter引擎，然后在配置文件中添加插件

flutter_webview_plugin: ^0.3.1

添加完了之后我们点击编辑器上方出现的pub get选项或者在Terminal中执行flutter packages get命令。命令执行完成之后，再次打开GeneratedPluginRegistrant文件，就会看到文件内容发生了变化，配置文件中新引用的flutter_webview_plugin被注册到了应用中。

@Keep
public final class GeneratedPluginRegistrant {
  public static void registerWith(@NonNull FlutterEngine flutterEngine) {
    ShimPluginRegistry shimPluginRegistry = new ShimPluginRegistry(flutterEngine);
      com.flutter_webview_plugin.FlutterWebviewPlugin.registerWith(shimPluginRegistry.registrarFor("com.flutter_webview_plugin.FlutterWebviewPlugin"));
  }
}