十一、Flutter开发插件并发布到pub

目录
一、创建plugin
二、plugin代码结构
三、编写代码
四、plugin发布
五、plugin查看
六、plugin使用

一、创建plugin

Android Studio开发工具提供了界面化创建插件，而我用的VS Code没有这个功能，可以使用控制台命令创建Flutter Plugin。 其中 --org 指定的是你需要运行 example 的包标识符，此主要运行在 Android 和 iOS 中，而 iOS 中代表 bundle id 所指向的证书域。 后面的 --template=plugin 则是指定创建一个 Flutter Plugin。

flutter create --org com.example --template=plugin plugin_name

二、plugin代码结构

• “android”目录是插件API在Android平台的实现。
• “ios”目录是插件API在iOS平台的实现。
• “example”目录是使用插件的一个示例项目。
• “lib”目录的文件，主要是创建“MethodChannel”，然后接收并处理来自原生平台发来的消息。

Flugin结构.png

三、编写代码

为了快速上传到pub.dev,代码这部分使用的是《十、Flutter加载动画》的源代码，做了一些优化，方便大家使用。

四、plugin发布

git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/1334051004/ProgressHud.git
git push -u origin master

github上传成功，把地址写到pubspec.yaml文件下的homepage。一定要author填上昵称和谷歌邮箱，上传pub时需要邮箱验证。

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

上传pub.png

复制上面的路径到浏览器里进行谷歌邮箱验证，验证成功后终端会继续执行。

pub.png

谷歌邮箱验证成功，却报了一个错误，无法访问accounts.google.com。

error.png

解决办法：设置终端代理，代理设置后，重新上传，顺利上传成功。

export http_proxy=http://127.0.0.1:1080
export https_proxy=http://127.0.0.1:1080

successfully.png

五、plugin查看

上传成功后我们怎么查看自己上传的项目呢？pub访问链接和github的差不多，前面是固定的，只有项目名称不一样。欢迎查看我上传的加载动画哦！

#https://pub.dartlang.org/packages/插件名，示例
https://pub.dartlang.org/packages/progress_hud10

pub.dev.png

六、plugin使用

插件的使用比较简单，添加依赖后就可以使用了。效果图如下：

ProgressHud.png

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {

  final key = GlobalKey();

  @override
  void initState() {
    super.initState();
    
    Future.delayed(const Duration(seconds:30), (){
        this.key.currentState.updateLoad(false);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: const Text('星星编程'),
        ),
        body: ProgressHud(key:this.key,loading: true ,color: Colors.red,width: 160,height: 160, child: Center(
        child: Text("加载动画简单示例"),
      ),
      ),
    )
    );
  }
}

ProgressHud参数使用说明：

• loading loading=false结束动画。loading=true开始动画。
• child 加载内容显示子组件。
• height 加载动画框的高度。
• width 加载动画框的宽度。
• color 加载动画框的颜色。
• bgColor 遮罩层的背景色。
• count 加载动画圆点的个数。
• speed 加载动画旋转的速度。
• opacity 遮罩层的透明度。