Flutter TabBar下方白条隐藏_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,
          )
1
2
3
4
5

方案二

往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),
          )
1
2
3
4
5
6
7

效果如下