Flutter TabBar下方白条隐藏

TabBar下划线产生原因

我们在设置AppBar的时候,常常用到TabBar做嵌套导航,但是由于tabbar自带下划线,会使得界面的设计不美观


在这里插入图片描述


这是由于我们在 MaterialApp里面的theme主题管理中开启了 useMaterial3: true ,这会导致TabBar组件样式出现下划线

Tabbar取消下划线

解决的方案有两种

方案一

Themedate里面将useMaterial3设置为false

theme: ThemeData(
            fontFamily: "PingFang",
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueGrey),
            useMaterial3: false,
          )

方案二

Themedate里面添加一个属性tabBarTheme ,内容为const TabBarTheme(dividerColor: Colors.transparent)

theme: ThemeData(
            fontFamily: "PingFang",
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueGrey),
            useMaterial3: true,
            // 去除TabBar底部线条
            tabBarTheme: const TabBarTheme(dividerColor: Colors.transparent),
          )

效果如下
在这里插入图片描述

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值