十一、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<MyApp> {

  final key = GlobalKey<ProgressHudState>();

  @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 遮罩层的透明度。

推荐阅读更多精彩内容