android studio android ios gradle iphone webview 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),

)

效果如下

精彩文章

 您阅读本篇文章共花了：