开发者社区> 阿策~> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Flutter 31: 图解自定义底部状态栏 ACEBottomNavigationBar (二)

简介: 0 基础学习 Flutter,第三十一步:补充自定义底部状态栏样式并发布第一版 Pub 插件~
+关注继续查看

      小菜前两天刚学习了一下自定义底部状态栏,现补充固定凸出中间 Item 位的样式,并生成插件发不到 Pub 中。

补充样式 (中间位凸出)

      小菜补充一种中间位凸出样式,item 总数为奇数时中间位才会凸出,而偶数时不会凸出,默认其他 item 为普通 nomal 样式,支持图片或 icon 以及文字变色等效果。

enum ACEBottomNavigationBarType {
  normal,   // 普通类型,选中变色,样式不变
  zoom,     // 图片或icon变大,此时隐藏文字,支持变色
  zoomout,  // 图片或icon变大,并凸出显示,文字显示,支持变色
  zoomoutonlypic,  // 图片或icon变大,并凸出显示,文字隐藏
  protruding,      // 中间位凸出显示,其余位为普通类型
}

      小菜在前几种类型中配置效果主要是在 NavigationItem 中实现的,而固定凸出位样式只有在中间显示,所以小菜准备在 ACEBottomNavigationBar 中进行配置,优先判断 item 总数,再将中间位凸出展示。其中小菜偷个懒,因为只有在中间位展示,所以在向子 NavigationItemtype 类型是传递的是 nomel 类型,只需判断中间位是否展示即可。

Widget protrudingWid() {
  Widget proWid;
  if (widget.items.length % 2 == 0) {
    proWid = Container(width: 0.0, height: 0.0);
  } else {
    proWid = Positioned.fill(
        top: -30,
        child: Container(
            child: Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Stack(alignment: Alignment.center, children: <Widget>[
                  SizedBox(
                      height: 60.0,
                      width: 60.0,
                      child: Container(
                          decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: widget.protrudingColor != null
                                  ? widget.protrudingColor
                                  : Colors.white),
                          child: Padding(
                              padding: const EdgeInsets.all(0.0),
                              child: protrudingItemWid(
                                  widget.items[protrudingIndex]))))
                ]))));
  }
  return proWid;
}

Widget protrudingItemWid(NavigationItemBean item) {
  Widget itemWidget;

  if (item.image != null) {
    itemWidget = GestureDetector(
        child: Image(image: item.image),
        onTap: () {
          widget.onTabChangedListener(protrudingIndex);
          _setSelected(item.key);
        });
  } else {
    itemWidget = IconButton(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
        alignment: Alignment(0, 0),
        icon: Icon(
          item.icon,
          size: 40.0,
          color: item.iconUnSelectedColor,
        ),
        onPressed: () {
          widget.onTabChangedListener(protrudingIndex);
          _setSelected(item.key);
        });
  }
  return itemWidget;
}

发布 Pub 插件

      小菜共整理了五种类型,基本可以实现小菜日常需要,尝试生成第一版插件并发布到 Pub 仓库。

1. 创建插件 plugin

      File -> New -> New Flutter Project... -> Flutter Plugin 实现方式与 Android 无异,主要是在 lib 中实现功能,并在 example 中实现基本的调用,之后双传到 git 上;

2. 发布 Pub 仓库

      按照官网介绍,其实很方便,但其中有很多需要注意的地方,前期准备外网环境与谷歌邮箱账号,小菜接下来详细介绍遇到的问题。

问题一:完善信息与包大小

      在执行第一步 flutter packages pub publish --dry-run 遇到的 Warning 是基本信息不完整以及包大于 100M,于是在 pubspec.yaml 文件中补充 author/homepage 信息,注意 author 中建议添加邮箱,之后删除无用的缓存文件;再次执行即可。

问题二:pub finished with exit code 1

      在执行第二步 flutter packages pub publish 遇到 Failed to upload the package. 因为没有错误提醒,这可愁坏小菜了,不知该从何处入手;

      官网建议从网络环境入手,但是小菜网络是正常访问的;之后又请教了一下网上大神,建议在国内先把国内镜像关掉,再尝试终于成功了,幸福感油然而生啊!


      小菜第一次尝试发布插件,还有很多不完善的地方,会努力维护,有不对的地方请多多指点。

      GitHub 源码      Pub 仓库

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Flutter 30: 图解自定义底部状态栏 ACEBottomNavigationBar (一)
0 基础学习 Flutter,第三十步:自定义底部状态栏~
4557 0
【Flutter】开发 Flutter 包和插件 ( 开发 Dart 插件包 | 发布 Dart 插件包 )(一)
【Flutter】开发 Flutter 包和插件 ( 开发 Dart 插件包 | 发布 Dart 插件包 )(一)
64 0
【Flutter】Dart 面向对象 ( 命名构造方法 | 工厂构造方法 | 命名工厂构造方法 )(一)
【Flutter】Dart 面向对象 ( 命名构造方法 | 工厂构造方法 | 命名工厂构造方法 )(一)
79 0
【Flutter】Dart 面向对象 ( 抽象类 | 抽象方法 )
【Flutter】Dart 面向对象 ( 抽象类 | 抽象方法 )
74 0
【Flutter】Dart 面向对象 ( mixins 特性 )
【Flutter】Dart 面向对象 ( mixins 特性 )
34 0
【错误记录】Flutter 报错 ( Dart SDK is not configured )
【错误记录】Flutter 报错 ( Dart SDK is not configured )
79 0
Flutter Dart中的日期相关api
这是我参与8月更文挑战的第 1 天,活动详情查看:8月更文挑战。为应掘金的八月更文挑战, 在日常的项目开发中经常会遇到时间戳的 Flutter Dart中日期转化成时间戳
61 0
【Flutter】Dart 数据类型 字符串类型 ( 字符串定义 | 字符串拼接 | 字符串 API 调用 )
【Flutter】Dart 数据类型 字符串类型 ( 字符串定义 | 字符串拼接 | 字符串 API 调用 )
141 0
Flutter 91: 图解 Dart 单线程实现异步处理之 Future (二)
0 基础学习 Flutter,第九十一步:简单学习 Future 实现异步的基本操作 async-await!
342 0
Flutter 90: 图解 Dart 单线程实现异步处理之 Future (一)
0 基础学习 Flutter,简单学习 Future 实现异步的基本操作!
931 0
+关注
阿策~
Android/Kotlin/Flutter 小菜鸟,基础技术博客学习与整理~
189
文章
11
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载