Flutter-Package插件的开发、发布、使用-六虎

创立Package

参数阐明：

要创立纯 Dart 库的 package，运用带有--template=package 标志的 flutter create 命令

flutter create --template=plugin 'plugin_name'

创立完结后，能够看到这个里边是不包括原生代码的，没有以前的 iOS 和 Android 目录

更多的 Flutter命令和快捷键 能够参考：Flutter-最全常用快捷键

这儿是关于有 Flutter-Plugin插件的开发、发布、运用

发布 Package

完善 package 里边的代码，我这儿只是简单写了一个自定义Dialog的代码，然后他人引证我这个包，运用这个自定义的升级 Dialog 。写完代码后，这个时分就开端上传 package 了。详细的 package 包的代码在文章最终面。

pubspec.yaml 里的参数阐明：

name：包的名称
description: 包的描绘信息
version：包的版别，假如上传了example，这儿有必要>=1.0.0
homepage：网页介绍，需求填写一个能正常访问的地址

CHANGELOG.md 里边也要改成对应的版别号

先查看Dart包

进入 package_dialog_demo 包项目的目录，然后履行

flutter packages pub publish--dry-run

假如包有问题是能够检测出来的。这儿明显能够看到是没有问题的

发布 Dart 包

flutter packages pub publish

常见问题：

问询是否要发布0.0.1版别的包

输入y，然后回车。提示让去谷歌的这个地址进行验证，所以首先要确保有一个Google 邮箱账号

复制这个地址，在浏览器输入，然后登陆 Google 账号，验证完结

只要在浏览器验证完结，终端主动也会提示验证完结

之后会长时刻卡住，最终失败了

这个时分会报错，看着是网络问题，需求翻墙，而且需求在终端设置署理

指定服务器进行发布

flutter packages pub publish--server=https://pub.dartlang.org

解决完上个问题，发现又出现下面许可证的问题

解决这个问题，就需求在GitHub上面创立仓库，挑选对应的许可证

然后创立好仓库后，进入仓库看到多了一个这个文件

打开这个文件，把内容复制，粘贴到 package 包 LICENSE 的里边

再次查看，看是否有问题，没有问题再次履行上传操作

这样就成功的创立包而且上传成功了，这个时分去 pub.dev/ 搜索上传的包 package_dialog_demo，发现是有的

运用 Package

创立运用工程

创立一个工程flutter_custom_dialog，引进这个自定义的package包，看是否能成功运用

引进 package 包

package_dialog_demo: ^0.0.1

然后pub get，在工程里边引进，我这儿设置了别名DialogDemo防止抵触，就能够正常的运用了

import 'package:package_dialog_demo/package_dialog_demo.dart' as DialogDemo;

包中运用图片的问题

注意： 虽然能正常运用，但是发现package里边有个图片不能正常显现。这个时分就需求去添加图片，因为咱们包上传只显现lib文件夹，所以在这个里边创立一个images文件夹放需求显现的图片

再次更新版别号0.0.2，然后履行上传。而且需求在运用你包的工程里边详细途径的引进，不然就会报图片找不到

这样再次更下了0.0.2的包后，运行工程发现图片运用正常的

其实封装的包里边包括图片运用非常不方便，他人运用你的库还需求引进你运用的详细图片途径，不然就无法正常显现。其实更主张少用图片，或者在包里暴露出传图片的属性。

优化 Package

这个时分看咱们上传的包，只要100分，满分有130分，需求添加对应的包描绘60-80字，而且需求添加一个示例Demo

添加Example

咱们能够运用上面创立的flutter_custom_dialog 工程代码，在包里边创立一个example文件，把main.dart代码复制到这儿。然后依旧在终端查看包有没有问题，没有问题开端履行上传操作，这个时分示例代码就被传上去了，而且还是空安全的。

这儿的评分只要110分，一个是描绘需求装备，一个是API的个数不够，这两个填写完就能够达到130分了。

添加功用模块

在往常的开发中，咱们看其他人开发的包也能够看出，并不想把所有的文件的内容爆露出来，而只是爆露出对应的运用，完成的过程是看不到的。

我这儿重新创立了一个文件custom_dialog.dart 文件，在里边完成对应功用，然后爆露给package_dialog_demo.dart

part of 'package_dialog_demo.dart';

在package_dialog_demo.dart中导入，一些其他文件需求导入的文件只需求在这儿导入就能够了

part 'custom_dialog.dart';

Package 包里边的代码

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
//定义枚举类型
enum DialogType { upgrade, alert }
class CustomDialog extends Dialog {
  final String? title; //标题
  final String? content; //内容
  final DialogType? dialogType;
  final void Function()? cancelCallBack;
  final void Function()? confirmCallBack;
  CustomDialog(
      {this.title,
      this.content,
      this.dialogType,
      this.confirmCallBack,
      this.cancelCallBack});
  @override
  Widget build(BuildContext context) {
    switch (this.dialogType) {
      case DialogType.upgrade:
        return Material(
          type: MaterialType.transparency,
          child: Center(
            child: upgradeDialog(context),
          ),
        );
        break;
      case DialogType.alert:
        return Material(
          type: MaterialType.transparency,
          child: Center(
            child: customAlertDialog(context),
          ),
        );
        break;
      default:
        return Material(
          type: MaterialType.transparency,
          child: Center(
            child: upgradeDialog(context),
          ),
        );
    }
  }
  Widget customAlertDialog(BuildContext context) {
    return Container(
      height: 300,
      margin: EdgeInsets.only(left: 40, right: 40),
      color: Colors.white,
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(20),
            child: Stack(
              children: [
                Align(
                  child: Text(
                    title!,
                    style: TextStyle(fontSize: 20, color: Color(0xFF2D2D2D)),
                  ),
                ),
                Align(
                  alignment: Alignment.centerRight,
                  child: InkWell(
                    child: Icon(Icons.close),
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ),
              ],
            ),
          ),
          Divider(),
          Container(
            width: double.infinity,
            margin: EdgeInsets.all(10),
            child: Text(
              content!,
              textAlign: TextAlign.left,
            ),
          )
        ],
      ),
    );
  }
  Widget upgradeDialog(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            margin: EdgeInsets.only(left: 20, right: 20),
            decoration: const ShapeDecoration(
              color: Color(0xfff2f2f2),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(10),
                ),
              ),
            ),
            child: Column(
              children: [
                Container(
                  height: 250,
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10),
                          topRight: Radius.circular(10)),
                      image: DecorationImage(
                        image: AssetImage('images/head_icon.png'),
                        fit: BoxFit.cover,
                      )),
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  padding: EdgeInsets.only(left: 10, right: 10),
                  width: double.infinity,
                  child: const Text(
                    '本次更新',
                    style: TextStyle(
                        fontSize: 20,
                        color: Color(0xFF2D2D2D),
                        decoration: TextDecoration.none),
                    textAlign: TextAlign.left,
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                Container(
                  padding: EdgeInsets.only(left: 10, right: 10),
                  width: double.infinity,
                  child: Text(
                    '解决了一些已知问题',
                    style: TextStyle(
                        fontSize: 16,
                        color: Color(0xFF333333),
                        decoration: TextDecoration.none),
                    textAlign: TextAlign.left,
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Divider(),
                Container(
                  height: 40,
                  margin: EdgeInsets.only(bottom: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      TextButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                          this.confirmCallBack!();
                        },
                        child: Text(
                          '升级',
                          style: TextStyle(fontSize: 18),
                        ),
                      ),
                      VerticalDivider(
                        color: Colors.grey,
                        width: 1,
                      ),
                      TextButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                            this.cancelCallBack!();
                          },
                          child: Text('暂不升级', style: TextStyle(fontSize: 18))),
                    ],
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Flutter-Plugin插件的开发、发布、运用

参考文章：flutterchina.club/developing-…

欢迎重视、点赞及转发。

Flutter-Package插件的开发、发布、使用