组件化格式

• 通过Dart包：纯Flutter
• 通过Plugin插件：如果组件不仅仅是 UI 组件，还涉及到与平台（如 Android 和 iOS）的交互，你可以使用 Flutter 的插件机制，将组件和平台代码一起封装成一个插件包。

组件化依赖方式

• 通过pub.dev
• 通过本地路径引用
• 通过远程git仓库：

组件示例

• 举🌰，现在创建一个组件my_package，管理众多子组件sub_package，项目只需要引用这个组件，就可以使用众多子组件进行开发，结构如下：

  ├── my_package
  │        └── sub_package_1(子组件1) 
  │        └── sub_plugin_2 (子组件2)
  │        └── sub_plugin_3 (子组件3)
  

• my_package管理组件：

  • my_package/lib/my_package.dart，如下：

    library my_package;
    //通过导出其他子组件的API，对子组件进行封装，
    //项目只需要import my_package，就可以调用子组件
    export 'package: sub_package_1/sub_package_1.dart';
    export 'package: sub_plugin_2/sub_plugin_2.dart';
    export 'package: sub_plugin_3/sub_plugin_3.dart';
    

  • my_package/pubspec.yaml内容如下:

    name: my_package
    description: Private plugins / packages
    version: 0.0.1
    homepage: "https://github.com/me/my_package.git"
    
    environment:
    sdk: ^3.5.1
    flutter: ">=1.17.0"
    
    dependencies:
    flutter:
     sdk: flutter
     //通过pub.dev引用子组件sub_package_1
    sub_package_1: ^4.0.0
    //通过本地路径引用子插件sub_plugins_2
    sub_plugin_2:
     path: ../sub_plugin_2
    //通过远程仓库引用子插件sub_plugin_3
    sub_plugin_3:
     git:
       url: git@github.com:your-repo/sub_plugin_3.git
       ref: main
    dev_dependencies:
     flutter_test:
      sdk: flutter
     flutter_lints: ^4.0.0
    flutter:
    

• 其中一个子组件sub_package1示例:

  • sub_package_1/lib/sub_package_1.dart，如下：

    library sub_package_1;
    //所有的import，export都放在这里
    import 'dart:io';
    import 'package:flutter/material.dart';
    ///part和part of 是配对使用的
    part 'src/example1.dart';
    part 'src/example2.dart';
    

  • sub_package_1/lib/src/example1.dart如下：

    ///这个文件不能使用任何import，用part of代表是my_package_1的子模块
    part of sub_package_1;
    ///功能的代码吧啦吧啦
    。。。
    

• 在其他项目的pubspec.yaml，引用my_package，就可以使用组件了：

  dependencies
     my_package: ^0.0.1
  

  *⚠️当然，my_package如果没有发布到pub.dev，也可以参照上面my_package/pubspec.yaml，更改为本地或者远程仓库依赖方式。

发布一个Dart Package到pub.dev

• 使用命令创建一个项目：

   flutter create --template=package my_dart_package
  

• 文件结构如下：

  ├── CHANGELOG.md 
  ├── LICENSE 
  ├── README.md 
  ├── analysis_options.yaml 
  ├── lib
  │  └── scr 
  │       └── example.dart(具体功能代码)
  │  └── lib.dart (主要对外信息 ，相当于头文件)
  ├── pubspec.yaml (配置package 的一些信息)
  └── test
    └── test.dart (测试代码)
  

• 举🌰，lib.dart代码如下：

  class Calculator {
     void log() {
       print('测试测试');
      }
  }
  

• 再举个🌰，test.dart代码如下：

  import 'package:my_package/lib.dart';
  import 'package: my_package/test.dart';
  void main() {
    test('adds one to input values', () {
      calculator.log();
    });
  }
  

  运行test.dart的main()，看到调试控制台输出测试测试
• 配置pubspec.yaml的信息：

  name: my_dart_package///不能与已有的pub.dev的包名冲突
  description: A simple Dart package that demonstrates basic math operations.
  version: 0.0.1
  author: Your Name <your.email@example.com>
  homepage: https://your-website.com
  environment:
     sdk: ">=2.12.0 <3.0.0"
  dependencies:
     # Add any required dependencies here
  dev_dependencies:
     flutter_test:
        sdk: flutter
  

• 登录pub.dev:

  flutter pub login
  

• 发布到pub.dev:

  ///发布前，预检查，确保没有错屋：
  flutter pub publish --dry-run
  ///发布到pub.dev
  flutter pub publish
  

发布Flutter Plugin到pub.dev

跟上面步骤一样，唯一需要注意的是，Flutter Plugin是跨平台的，在lib｜android|iOS各自文件路径下，写对应的功能代码：

 flutter create --template=plugin --platforms android,ios my_plugin