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 仓库

目录
相关文章
|
11月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
393 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
11月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
381 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
UED 开发者 容器
Flutter&鸿蒙next 的 Sliver 实现自定义滚动效果
Flutter 提供了强大的滚动组件,如 ListView 和 GridView,但当需要更复杂的滚动效果时,Sliver 组件是一个强大的工具。本文介绍了如何使用 Sliver 实现自定义滚动效果,包括 SliverAppBar、SliverList 等常用组件的使用方法,以及通过 CustomScrollView 组合多个 Sliver 组件实现复杂布局的示例。通过具体代码示例,展示了如何实现带有可伸缩 AppBar 和可滚动列表的页面。
488 1
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式,包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法,您可以构建灵活、可重用且易于维护的 UI 组件,从而提升开发效率和代码质量。
412 1
|
前端开发 开发者
深入探索 Flutter 鸿蒙版的画笔使用与高级自定义动画
本文深入探讨了 Flutter 中的绘图功能,重点介绍了 CustomPainter 和 Canvas 的使用方法。通过示例代码,详细讲解了如何绘制自定义图形、设置 Paint 对象的属性以及实现高级自定义动画。内容涵盖基本绘图、动画基础、渐变动画和路径动画,帮助读者掌握 Flutter 绘图与动画的核心技巧。
280 1
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
287 1
|
Dart 搜索推荐 API
Flutter & 鸿蒙next版本:自定义对话框与表单验证的动态反馈与错误处理
在现代移动应用开发中,用户体验至关重要。本文探讨了如何在 Flutter 与鸿蒙操作系统(HarmonyOS)中创建自定义对话框,并结合表单验证实现动态反馈与错误处理,提升用户体验。通过自定义对话框和表单验证,开发者可以提供更加丰富和友好的交互体验,同时利用鸿蒙next版本拓展应用的受众范围。
277 1
|
前端开发
Flutter快速实现自定义折线图,支持数据改变过渡动画
Flutter快速实现自定义折线图,支持数据改变过渡动画
388 4
Flutter快速实现自定义折线图,支持数据改变过渡动画
|
前端开发 搜索推荐
Flutter中自定义气泡框效果的实现
Flutter中自定义气泡框效果的实现
478 3
|
开发者 监控 开发工具
如何将JSF应用送上云端?揭秘在Google Cloud Platform上部署JSF应用的神秘步骤
【8月更文挑战第31天】本文详细介绍如何在Google Cloud Platform (GCP) 上部署JavaServer Faces (JSF) 应用。首先,确保已准备好JSF应用并通过Maven构建WAR包。接着,使用Google Cloud SDK登录并配置GCP环境。然后,创建`app.yaml`文件以配置Google App Engine,并使用`gcloud app deploy`命令完成部署。最后,通过`gcloud app browse`访问应用,并利用GCP的监控和日志服务进行管理和故障排查。整个过程简单高效,帮助开发者轻松部署和管理JSF应用。
193 0