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自定义了地图
花了五天时间,用Flutter自定义地图是什么体验?外卖小哥都开上火箭了?什么?我被女朋友赶出家门啦?欢迎观看被女友赶出家门之开火箭送外卖篇~
|
29天前
|
运维 监控 定位技术
应用研发平台EMAS常见问题之flutter插件不支持自定义图标如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
27 0
|
4月前
Flutter 自定义ICON库
Flutter 自定义ICON库 Flutter提供了一些内置的ICON库,但在实际开发中,可能需要一些自定义的ICON图标。Flutter允许我们使用自定义图标,本文将介绍如何创建和使用自定义ICON库。
|
4月前
|
UED
Flutter之自定义路由切换动画
Flutter之自定义路由切换动画 在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等。默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要自定义一些特殊的动画效果来提高用户体验。本文将介绍如何在Flutter中实现自定义的路由切换动画。
|
4月前
|
开发框架 Dart 容器
Flutter 自定义渐变按钮 GradientButton
Flutter 自定义渐变按钮 GradientButton Flutter 是一种流行的跨平台移动应用开发框架。Flutter 提供了许多内置的小部件,但有时您可能需要创建自己的小部件以满足特定的需求。这个文档将介绍如何创建一个自定义渐变按钮小部件 GradientButton。
|
4月前
|
容器
Flutter 自定义实现时间轴、侧边进度条
时间轴和侧边进度条是非常常见的 UI 控件,它们可以增强应用的视觉效果和交互体验。在这篇文章中,我们将详细介绍如何使用 Flutter 自定义实现这两个控件。
|
8月前
Flutter中 解决自定义阿里妈妈图标一直显示不出来的问题
Flutter中 解决自定义阿里妈妈图标一直显示不出来的问题
64 0
|
10月前
|
Android开发 iOS开发
Flutter应用开发,系统样式改不了?SystemChrome 状态栏、导航栏、屏幕方向……想改就改
Flutter应用开发,系统样式改不了?SystemChrome 状态栏、导航栏、屏幕方向……想改就改
|
12月前
|
存储 监控
flutter系列之:如何自定义动画路由
flutter中有默认的Route组件,叫做MaterialPageRoute,一般情况下我们在flutter中进行跳转的话,只需要向Navigator中传入一个MaterialPageRoute就可以了。 但是MaterialPageRoute太普通了,如果我们想要做点不同的跳转特效应该如何处理呢? 一起来看看吧。
如何自定义Flutter日志上传本地系统
Dart中可以通过try/catch/finally来捕获代码块异常,这个和其他编程语言类似,如果读者不清楚,可以查看Dart语言文档,不再赘述,下面我们看看Flutter中的异常捕获。
如何自定义Flutter日志上传本地系统