flutter开发实战-实现自定义bottomNavigationBar样式awesome_bottom_bar

flutter开发实战-实现自定义bottomNavigationBar样式awesome_bottom_bar

在开发过程中，需要自定义bottomNavigationBar样式，可以自定义实现，这里使用的是awesome_bottom_bar库

在这里插入图片描述

一、awesome_bottom_bar

在pubspec.yaml中引入awesome_bottom_bar

awesome_bottom_bar: ^1.2.2

二、实现自定义bottomNavigationBar

切换界面使用PageView.builder

PageView 是一个非常重要的组件。比如大多数 App 都包含 Tab 换页效果、图片轮动以及抖音上下滑页切换视频功能等等都可以使用PageView来实现

PageView({Key? key,this.scrollDirection = Axis.horizontal, // 滑动方向this.reverse = false,PageController? controller,this.physics,List<Widget> children = const <Widget>[],this.onPageChanged,//每次滑动是否强制切换整个页面，如果为false，则会根据实际的滑动距离显示页面this.pageSnapping = true,//主要是配合辅助功能用的，后面解释this.allowImplicitScrolling = false,//后面解释this.padEnds = true,
})

切换界面使用PageView.builder，当点击不同的tab时候，可以使用PageController进行切换

PageView.builder(itemBuilder: (BuildContext context, int index) {return KeepAliveWrapper(child: subMainPages[index], keepAlive: true);},itemCount: subMainPages.length,controller: _pageController,physics: NeverScrollableScrollPhysics(),onPageChanged: (index) {_selectedIndex = index;_animationControllerList[_selectedIndex!].forward();_animationControllerList[_lastSelectedIndex!].reverse();},),),

使用默认效果的bottomNavigationBar

bottomNavigationBar: BottomBarDefault(items: buildTabItems(context),backgroundColor: Colors.white,color: Colors.black87,colorSelected: Colors.amber,indexSelected: _selectedIndex,duration: Duration(milliseconds: 200),onTap: (int index) => setState(() {_lastSelectedIndex = _selectedIndex;_pageController.jumpToPage(index);}),),

当需要特殊样式的bottomNavigationBar，时候，比如如下点击后会突出的三角形样式

bottomNavigationBar: BottomBarInspiredInside(items: [TabItem(icon: Icons.home_outlined,title: S.of(context).home,),TabItem(icon: Icons.qr_code_scanner_outlined,title: S.of(context).qrScan,),TabItem(icon: Icons.nature_outlined,title: S.of(context).mine,count: Container(padding: EdgeInsets.all(3.0),decoration: BoxDecoration(border: Border.all(color: Colors.white,width: 1.0,style: BorderStyle.solid,),color: Colors.red,borderRadius: BorderRadius.all(Radius.circular(20.0),),// gradient: LinearGradient(//   begin: Alignment.topLeft,//   end: Alignment.bottomRight,//   colors: [//     Colors.red.withOpacity(0.5),//     Colors.red.withOpacity(0.3),//     Colors.red.withOpacity(1.0),//   ],// ),),child: Text("99",style: TextStyle(fontSize: 10,color: Colors.white,fontWeight: FontWeight.w500),),),)],backgroundColor: Colors.lightBlue,color: Colors.white,colorSelected: Colors.white,indexSelected: _selectedIndex,duration: Duration(milliseconds: 200),onTap: (int index) => setState(() {_pageController.jumpToPage(index);}),itemStyle: ItemStyle.hexagon,chipStyle:const ChipStyle(isHexagon: true, background: Colors.blueAccent),),

完整实例代码如下

class MainTabNavigator extends StatefulWidget {const MainTabNavigator({Key? key}) : super(key: key);@overrideState<MainTabNavigator> createState() => _MainTabNavigatorState();
}class _MainTabNavigatorState extends State<MainTabNavigator>with TickerProviderStateMixin {PageController _pageController = PageController();int _selectedIndex = 0;late DateTime _lastPressed;List<Widget> subMainPages = [];late List<AnimationController> _animationControllerList;late List<Animation<double>> _animationList;int? _lastSelectedIndex = 0;@overridevoid initState() {// 设置默认的subMainPages = mainPages;super.initState();_animationControllerList = List<AnimationController>.empty(growable: true);_animationList = List<Animation<double>>.empty(growable: true);for (int i = 0; i < subMainPages.length; ++i) {_animationControllerList.add(AnimationController(duration: Duration(milliseconds: 200), vsync: this));_animationList.add(Tween(begin: 0.0, end: 5.0).chain(CurveTween(curve: Curves.ease)).animate(_animationControllerList[i]));}WidgetsBinding.instance.addPostFrameCallback((_) {_animationControllerList[_selectedIndex!].forward();});}void animationDispose() {for (int i = 0; i < subMainPages.length; ++i) {_animationControllerList[i].dispose();}}@overridevoid dispose() {// TODO: implement disposeanimationDispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(resizeToAvoidBottomInset: false,body: WillPopScope(onWillPop: () async {if (_lastPressed == null ||DateTime.now().difference(_lastPressed) > Duration(seconds: 1)) {//两次点击间隔超过1秒则重新计时_lastPressed = DateTime.now();return false;}return true;},child: PageView.builder(itemBuilder: (BuildContext context, int index) {return KeepAliveWrapper(child: subMainPages[index], keepAlive: true);},itemCount: subMainPages.length,controller: _pageController,physics: NeverScrollableScrollPhysics(),onPageChanged: (index) {_selectedIndex = index;_animationControllerList[_selectedIndex!].forward();_animationControllerList[_lastSelectedIndex!].reverse();},),),// bottomNavigationBar: BottomBarDefault(//   items: buildTabItems(context),//   backgroundColor: Colors.white,//   color: Colors.black87,//   colorSelected: Colors.amber,//   indexSelected: _selectedIndex,//   duration: Duration(milliseconds: 200),//   onTap: (int index) => setState(() {//     _lastSelectedIndex = _selectedIndex;//     _pageController.jumpToPage(index);//   }),// ),bottomNavigationBar: BottomBarInspiredInside(items: [TabItem(icon: Icons.home_outlined,title: S.of(context).home,),TabItem(icon: Icons.qr_code_scanner_outlined,title: S.of(context).qrScan,),TabItem(icon: Icons.nature_outlined,title: S.of(context).mine,count: Container(padding: EdgeInsets.all(3.0),decoration: BoxDecoration(border: Border.all(color: Colors.white,width: 1.0,style: BorderStyle.solid,),color: Colors.red,borderRadius: BorderRadius.all(Radius.circular(20.0),),// gradient: LinearGradient(//   begin: Alignment.topLeft,//   end: Alignment.bottomRight,//   colors: [//     Colors.red.withOpacity(0.5),//     Colors.red.withOpacity(0.3),//     Colors.red.withOpacity(1.0),//   ],// ),),child: Text("99",style: TextStyle(fontSize: 10,color: Colors.white,fontWeight: FontWeight.w500),),),)],backgroundColor: Colors.lightBlue,color: Colors.white,colorSelected: Colors.white,indexSelected: _selectedIndex,duration: Duration(milliseconds: 200),onTap: (int index) => setState(() {_pageController.jumpToPage(index);}),itemStyle: ItemStyle.hexagon,chipStyle:const ChipStyle(isHexagon: true, background: Colors.blueAccent),),// bottomNavigationBar: FlashyTabBar(//   selectedIndex: _selectedIndex,//   showElevation: true,//   onItemSelected: (index) => setState(() {//     _pageController.jumpToPage(index);//   }),//   items: [//     FlashyTabBarItem(//       icon: Icon(Icons.home_outlined),//       title: Text(S.of(context).home),//     ),//     FlashyTabBarItem(//       icon: Icon(Icons.qr_code_scanner_outlined),//       title: Text(S.of(context).qrScan),//     ),//     FlashyTabBarItem(//       icon: Icon(Icons.nature_outlined),//       title: Text(S.of(context).mine),//     ),//   ],// ),      // bottomNavigationBar: BottomNavigationBar();}List<TabItem> buildTabItems(BuildContext context) {TabItem homeItem = TabItem(icon: Icons.home_outlined,title: S.of(context).home,count: buildTabItem(context, 0),);TabItem qsItem = TabItem(icon: Icons.qr_code_scanner_outlined,title: S.of(context).qrScan,count: buildTabItem(context, 1),);TabItem discoveryItem = TabItem(icon: Icons.location_searching_outlined,title: S.of(context).discovery,count: buildTabItem(context, 2),);TabItem mineItem = TabItem(icon: Icons.nature_outlined,title: S.of(context).mine,count: buildTabItem(context, 3),);return [homeItem, qsItem, discoveryItem, mineItem];}Widget buildTabItem(BuildContext context, int index) {return AnimatedBuilder(animation: _animationList[index],builder: (BuildContext context, Widget? child) {return Container(margin: EdgeInsets.only(top: _animationList[index].value,),child: child,);},child: buildTabItemCount(context),);}Widget buildTabItemCount(BuildContext context) {return Container(padding: const EdgeInsets.all(3.0),decoration: BoxDecoration(border: Border.all(color: Colors.white,width: 1.0,style: BorderStyle.solid,),color: Colors.red,borderRadius: const BorderRadius.all(Radius.circular(30.0),),// gradient: LinearGradient(//   begin: Alignment.topLeft,//   end: Alignment.bottomRight,//   colors: [//     Colors.red.withOpacity(0.5),//     Colors.red.withOpacity(0.3),//     Colors.red.withOpacity(1.0),//   ],// ),),child: const Text("99",style: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.w500),),);}
}

三、小结

flutter开发实战-自定义bottomNavigationBar样式。

https://blog.csdn.net/gloryFlow/article/details/132761946

学习记录，每天不停进步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/76683.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用阿里云轻量应用服务器安装Docker进行SpringBoot项目的部署上线

使用阿里云轻量应用服务器安装Docker进行SpringBoot项目的部署上线

零、写在前面 项目源码&#xff1a;QiuShicheng/Qiu-blog (github.com) 项目是跟着B站up主【三更草堂】做的&#xff0c;本人最终系统是修改了一些前端代码。 (注&#xff1a;源码中前端代码未修改&#xff0c;仍是up主提供的&#xff09; 购买了一个轻量应用服务器2核2G&a…
阅读更多...
2023年世界机器人大会回顾

2023年世界机器人大会回顾

1、前记&#xff1a; 本次记录是我自己去世界机器人博览会参观的一些感受&#xff0c;所有回顾为个人感兴趣部分的机器人产品分享。整个参观下来最大的感受就是科学技术、特别是机器人技术和人工智能毫无疑问地、广泛的应用在我们日常生活的方方面面&#xff0c;在安全巡检、特…
阅读更多...
SolVES4.1学习2——导入数据运行模型

SolVES4.1学习2——导入数据运行模型

使用样例数据运行模型很容易&#xff0c;运行自己的数据要根据教程先对数据进行预处理之后根据教程导入数据。 首先新建一个solves数据库&#xff0c;之后restore。导入数据大概的流程为&#xff1a; 1、导入数据 首先使用PostGIS导入矢量数据。矢量数据包括点位和范围数据。…
阅读更多...
亚马逊API接口解析，实现获得AMAZON商品详情

亚马逊API接口解析，实现获得AMAZON商品详情

要解析亚马逊API接口并实现获取亚马逊商品详情&#xff0c;你需要按照以下步骤进行操作&#xff1a; 了解亚马逊开发者中心&#xff1a;访问亚马逊开发者中心&#xff0c;并了解相关的API文档、开发者指南和规定。注册开发者账号&#xff1a;在亚马逊开发者中心上注册一个开发…
阅读更多...
分类预测 | MATLAB实现PCA-BiLSTM(主成分双向长短期记忆神经网络)分类预测

分类预测 | MATLAB实现PCA-BiLSTM(主成分双向长短期记忆神经网络)分类预测

分类预测 | MATLAB实现PCA-BiLSTM(主成分双向长短期记忆神经网络)分类预测 目录 分类预测 | MATLAB实现PCA-BiLSTM(主成分双向长短期记忆神经网络)分类预测预测效果基本介绍程序设计参考资料致谢 预测效果 基本介绍 分类预测 | MATLAB实现PCA-BiLSTM(主成分双向长短期记忆神经网…
阅读更多...
目标检测笔记(十四): 使用YOLOv8完成对图像的目标检测任务（从数据准备到训练测试部署的完整流程）

目标检测笔记(十四): 使用YOLOv8完成对图像的目标检测任务（从数据准备到训练测试部署的完整流程）

文章目录 一、目标检测介绍二、YOLOv8介绍三、源码获取四、环境搭建4.1 环境检测 五、数据集准备六、 模型训练6.1 方式一6.2 方式二6.3 针对其他任务 七、模型验证八、模型测试九、模型转换9.1 转onnx9.1.1 方式一 9.2 转tensorRT9.2.1 trtexec9.2.2 代码转换9.2.3 推理代码 一…
阅读更多...
SpringBoot整合SSM-junit测试

SpringBoot整合SSM-junit测试

前提 &#xff1a;创建一个新的springboot模块 创建一个员工案例(搭建) 创建员工实体类创建员工的控制层创建员工的服务层&#xff08;接口–实现类&#xff09;创建员工的数据层&#xff08;接口–实现类&#xff09; 以上的4种文件 是使用SSM必备的文件 创建员工实体类 属性…
阅读更多...
0基础学习VR全景平台篇 第97篇：VR步进式漫游

0基础学习VR全景平台篇 第97篇：VR步进式漫游

蛙色VR步进式漫游正式上线&#xff01; 为全行业室内场景提供三维空间重建能力&#xff0c;基于真实场景复刻&#xff0c;多维展示打破线下时空限制&#xff0c;提供高性价比的VR空间应用解决方案。 一、什么是步进式漫游&#xff1f; VR步进式漫游&#xff0c;基于AI特征点提…
阅读更多...
修复中间件log4j漏洞方案(直接更换漏洞jar包)

修复中间件log4j漏洞方案(直接更换漏洞jar包)

说明&#xff1a; 后台服务里面的log4j漏洞我们已经全部升级处理了&#xff0c;但是一些中间件镜像包里的log4j漏洞需要单独处理 解决办法以ElasticSearch7.6.2为例&#xff1a; 方法&#xff1a; &#xff08;1&#xff09;找到容器里面有哪些旧的log4j依赖包 &#xff08;…
阅读更多...
Window安装Node.js npm appium Appium Desktop

Window安装Node.js npm appium Appium Desktop

Window安装Node.js npm appium appium Desktop 1.安装nodejs 参考链接&#xff1a; https://blog.csdn.net/weixin_42064877/article/details/131610918 1)打开浏览器&#xff0c;并前往 Node.js 官网 https://nodejs.org/ ↗。 2)在首页中&#xff0c;您可以看到当前 Node.…
阅读更多...
第17章_瑞萨MCU零基础入门系列教程之CAN FD 模块

第17章_瑞萨MCU零基础入门系列教程之CAN FD 模块

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…
阅读更多...
双碳目标下基于“遥感+”集成技术的碳储量、碳排放、碳循环、温室气体等多领域监测与模拟实践

双碳目标下基于“遥感+”集成技术的碳储量、碳排放、碳循环、温室气体等多领域监测与模拟实践

卫星遥感具有客观、连续、稳定、大范围、重复观测的优点&#xff0c;已成为监测全球碳盘查不可或缺的技术手段&#xff0c;卫星遥感也正在成为新一代 、国际认可的全球碳核查方法。目的就是梳理碳中和与碳达峰对卫星遥感的现实需求&#xff0c;系统总结遥感技术在生态系统碳储量…
阅读更多...
pdf文件过大如何缩小上传？pdf压缩跟我学

pdf文件过大如何缩小上传？pdf压缩跟我学

在我们日常工作和生活中&#xff0c;经常会遇到PDF文件过大的问题&#xff0c;给文件传输和存储带来了很大的不便。那么&#xff0c;如何缩小PDF文件大小以便上传呢&#xff1f;下面就给大家分享几个压缩方法&#xff0c;一起来了解下PDF文件压缩方法吧~ 方法一&#xff1a;嗨格…
阅读更多...
docker系列(5) - docker仓库

docker系列(5) - docker仓库

文章目录 5 docker仓库5.1 创建命名空间5.2 创建镜像仓库5.3 设置访问凭证5.3 镜像仓库命令信息5.4 登录阿里云上传镜像5.5 拉取镜像运行5.6 私有仓库(docker Registry)5.6.1 安装docker registry5.6.2 准备镜像5.6.2 本地私服仓库5.6.3 推送到私服仓库5.6.4 拉取私服镜像 5 do…
阅读更多...
C/C++输出第二个整数 2019年9月电子学会青少年软件编程（C/C++）等级考试一级真题答案解析

C/C++输出第二个整数 2019年9月电子学会青少年软件编程（C/C++）等级考试一级真题答案解析

目录 一、题目要求 1、编程实现 2、输入输出 二、解题思路 1、案例分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 2019年9月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 输入三个整数&#xff0c;把第二个输入的整数输出。 2、输入输出 输…
阅读更多...
如何在三星手机上截屏?每一款三星手机的每一种方法，包括S23

如何在三星手机上截屏?每一款三星手机的每一种方法，包括S23

无论你是将截图作为保存图片、消息或信息的快速方式&#xff0c;还是作为演示像这篇文章这样有用的操作方法的方式&#xff0c;能够截图都会非常有用。 但并不是所有的手机都以相同的方式进行屏幕截图。事实上&#xff0c;并不是所有的三星手机都能做到这一点。例如&#xff0…
阅读更多...
一文了解国自然热点“超级增强子”的重要标记——H3K27ac

一文了解国自然热点“超级增强子”的重要标记——H3K27ac

2023国自然结果已经揭晓&#xff0c;“超级增强子”&#xff08; Super enhancer, SE&#xff09;作为国自然新热点&#xff0c;2023年项目为32个。2019-2023年来总累计项目143项&#xff0c;但累计项目金额达6033万。此外&#xff0c;Pubmed数据统计显示5年间SE影响因子大于10…
阅读更多...
企业架构LNMP学习笔记27

企业架构LNMP学习笔记27

Keepalived的配置补充&#xff1a; 脑裂&#xff08;裂脑&#xff09;&#xff1a;vip出现在了多台机器上。网络不通畅&#xff0c;禁用了数据包&#xff0c;主备服务器没法通讯&#xff0c;造成备服务器认为主服务器不可用&#xff0c;绑定VIP&#xff0c;主服务器VIP不会释放…
阅读更多...
laravel系列(二) Dcat admin框架开发工具使用

laravel系列(二) Dcat admin框架开发工具使用

开发工具可以非常好的帮助我们去快速的开发CURD等操作,但也是有部分框架有些不是太便捷操作,这篇博客主要为大家介绍Dcat admin的开发工具详细使用. 如何创建页面: 在联表我们首先要去.env文件中去找连接数据库方法: APP_NAMELaravel APP_ENVlocal APP_KEYbase64:thO0lOVlzj0…
阅读更多...
VR数字工厂，为企业工厂打造竞争新优势

VR数字工厂，为企业工厂打造竞争新优势

工业经济中大部分行业都是制造业&#xff0c;为了合力助推工业经济提质增效&#xff0c;谋划推进制造业数字化转型就显得尤为重要了。用VR赋能工厂数字升级&#xff0c;打造VR数字工厂&#xff0c;满足各行各业沉浸式营销展示需求。 VR数字工厂是一种全新的工业模式&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023