一款Flutter伪自定义BottomAppBar

最新推荐文章于 2024-05-18 00:05:22 发布
最新推荐文章于 2024-05-18 00:05:22 发布
阅读量905 收藏 1
点赞数 2
分类专栏： FlutterUI 文章标签： Flutter BottomAppBar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yumi0629/article/details/97245753
版权
该博客介绍了如何使用Flutter原生组件结合自定义方法，创建一个伪自定义的BottomAppBar。适合不想从头组合Widget的开发者。文章提供了一种实现思路，包括控制位置和自定义属性，并给出了详细的代码示例链接。
摘要由CSDN通过智能技术生成

https://github.com/yumi0629/FlutterUI/tree/master/lib/bottomappbar

  使用Flutter原生的FloatingActionButton+BottomAppBar实现，配合Scaffold使用更舒服，适合不喜欢自己用Widget组合自定义BottomAppBar的小伙伴。

  实现思路为：1、自定义floatingActionButtonLocation控制FloatingActionButton的位置；2、自定义BottomAppBar的shape属性，绘制BottomAppBar的边框。

  使用方式如下，其中_CenterDockedFloatingActionButtonLocation和shape: CircularRaisedRectangle(),为自定义部分，详细代码戳上面的Github链接：

@override
  Widget build(BuildContext context) {
最低0.47元/天 解锁文章
吉原拉面
关注
专栏目录
Flutter沉浸式透明状态栏|flutter自定义凸起BottomAppBar导航
十年代码写十年
05-11 1246
前言 如下图：状态栏是指android手机顶部显示手机状态信息的位置。 android 自4.4开始新加入透明状态栏功能，状态栏可以自定义颜色背景，使titleBar能够和状态栏融为一体，增加沉浸感。 如上图：Flutter状态栏默认为黑色半透明，那么如何去掉这个状态栏的黑色半透明背景色，让其和标题栏颜色一致，通栏沉浸式，实现如下图效果呢？ 首先需要在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java，判断一下版本号然后将状态栏颜
Flutter BottomAppBar
Millet
11-17 984
Flutter BottomAppBar BottomAppBar // 底部应用栏目 class BottomAppBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( // FAB按钮，位置是位于上面的 floatingActionButtonLocation: FloatingActionButtonLocation.
自定义BottomAppBar
weixin_40746230的博客
04-20 411
自定义BottomAppBar
Flutter 中的 BottomAppBar 小部件：全面指南
最新发布
smileKH的博客
05-18 717
是一个位于屏幕底部的水平应用栏，它为用户提供了快速访问应用主要功能的方式。可以包含导航图标、标题以及与之配合的浮动操作按钮（shape: CircularNotchedRectangle(), // 设置底部导航栏的形状color: Theme.of(context).primaryColor, // 使用主题颜色],),
Flutter进阶实战 4-20 不规则底部工具栏BottomAppBar 制作（2）
dpl12的博客
07-07 769
前言：前面博客做了一个不规则底部工具栏BottomAppBar的界面，这里继续进行完善，实现按钮的点击事件。 实现效果： 实现过程： 1、StatefulWidget子页面的制作 前面使用的子页面继承与StatelessWidget(不可变控件)，所以很麻烦的写了4个页面，其实完全可以写一个继承于StatefulWidget的控件，进行动态创建。 新建一个each_view.dart...
Flutter沉浸式透明状态栏-flutter自定义凸起BottomAppBar导航
m0_65146275的博客
12-23 1461
} } } 注意：flutter项目默认是使用Kotlin语言 在Google I/O 2017中，Google 宣布 Kotlin 取代 Java 成为 Android 官方开发语言。 Kotlin详情见：https://www.kotlincn.net/ 通过 flutter create flutter_app 命令创建flutter项目时，默认是Kotlin语言模式，如果想要修改成Java语言，则运行如下命令创建项目即可 flutter create -a java flutter_app
Flutter自定义TabBar的Indicator.zip
03-02
要创建一个自定义的TabBar Indicator，我们需要实现`Painter`类，这是一个Flutter中用于绘制2D图形的接口。这将使我们能够根据需要自定义Indicator的形状和动画效果。 在给定的压缩包中，有两个关键文件：`flash_...
【Flutter】【widget】BottomNavigationBar和BottomAppBar
自动人生博客
11-07 1282
BottomNavigationBar 底部导航栏欢迎关注，留言，咨询，交流！
Flutter沉浸式透明状态栏-flutter自定义凸起BottomAppBar导航(1)
bfhye16552的博客
04-17 886
【Android开发核心知识点笔记】【Android思维脑图（技能树）】【Android核心高级技术PDF文档，BAT大厂面试真题解析】【Android高级架构视频学习资源】《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！厂面试真题解析】**[外链图片转存中…(img-cHjMzPSm-1713362464474)]【Android高级架构视频学习资源】《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》
flutter BottomAppBar实现不规则底部导航栏
08-25
主要为大家详细介绍了flutter BottomAppBar实现不规则底部导航栏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
flutter appbar bottom 底部view
仰望星空
12-25 3997
appBar: AppBar( title: const Text('AppBar Bottom Widget'), leading: IconButton( tooltip: 'Previous choice', icon: const Icon(Icons.arrow_back), ...
Flutter Appbar
pumelll的博客
03-21 818
AppBar是一个顶端栏，对应着 Android 的 Toolbar。 AppBar 有以下常用属性： leading → Widget - 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮。 title → Widget - Toolbar 中主要内容，通常显示为当前界面的标题文字。 actions → List - 一个 Widget 列表，...
（五）Flutter 界面结构 tab appbar bottomNavigationBar drawer
丿灬安之若死
12-12 629
上节课程的内容 都写在了一起 为了解耦 我们可以把他们单独提取出来一个类 lib 下新建demo/listview_demo.dart文件 内容如下 import 'package:flutter/material.dart'; import 'package:nihao_flutter/model/post.dart'; class ListViewDemo extends St...
Flutter BottomAppBar插入FAB
weixin_34097242的博客
05-10 286
import 'package:flutter/material.dart'; void main() => runApp(new BottomAppBarDemo()); class BottomAppBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { retu...
flutter 隐藏appbar_Flutter：使用Sliver小部件时如何在滚动中隐藏BottomAppBar？
weixin_39687542的博客
12-19 275
I'm trying to hide a bottom app bar when the user scrolls down the list, exactly like it is shown in material design docs in behaviour sections:So far, I added bottom app bar to the Scaffold, but it h...
flutter 底部导航栏使用BottomAppBar组件和floatingActionButton浮动按钮组件实现中间嵌入式圆形导航
weixin_43294560的博客
04-26 1991
底部导航栏使用BottomAppBar组件 底部导航栏除了可以使用BottomNavigationBar固定样式外,还可以自定义导航栏中的按钮 BottomAppBar( color:, 底部导航栏颜色 shape: CircularNotchedRectangle(), 有缺口的圆形矩阵,用来放置浮动按钮 child...
Flutter 实现自定义BottomAppBar导航
"本文介绍了如何在Flutter中使用BottomAppBar来实现一个不规则形状的底部导航栏，并提供了具体的代码实例。主要涉及了三种实现底部导航栏的方式：TabBar + TabBarView、BottomNavigationBar + ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值