I'm getting a bottom underline in the TabBar. I tried to remove it. but its not removing.
(https://i.sstatic.net/CbDf57Nr.png)
Widget build(BuildContext context) {
TabController tabController = TabController(length: 2, vsync: this);
return Scaffold(
backgroundColor: Palette.white,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(color: const Color(0x1E767680), borderRadius: BorderRadius.circular(7)),
height: 36,
child: TabBar(
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: const EdgeInsets.all(2),
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(7),
color: Colors.deepPurple,
),
controller: tabController,
labelStyle: const TextStyle(color: Colors.white, fontSize: 13, fontWeight: FontWeight.w500),
unselectedLabelStyle: const TextStyle(color: Color(0xFF5B5B5B), fontSize: 13, fontWeight: FontWeight.w400),
indicatorWeight: 0,
indicatorColor: Colors.transparent,
tabs: const [
Tab(text: 'Page 1'),
Tab(text: 'Page 2'),
],
),
),
const SizedBox(height: 16),
//TabBarView
Expanded(
child: TabBarView(
controller: tabController,
children: [
_buildAttendanceView(),
Tab2(),
],
),
)
],
), );
I tried, border: Border.all(color: Colors.transparent) to remove any visible border. indicatorWeight: 0: indicatorColor: Colors.transparent: Wrap the TabBar widget inside a Material widget and set borderOnForeground to false. but didnt work.
Try below code, add dividerColor: Colors.transparent,
Read more about dividerColor
Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: const Color(0x1E767680),
borderRadius: BorderRadius.circular(7)),
height: 36,
child: TabBar(
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: const EdgeInsets.all(2),
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(7),
color: Colors.deepPurple,
),
controller: tabController,
labelStyle: const TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.w500),
unselectedLabelStyle: const TextStyle(
color: Color(0xFF5B5B5B),
fontSize: 13,
fontWeight: FontWeight.w400),
indicatorWeight: 0,
dividerColor: Colors.transparent,
indicatorColor: Colors.transparent,
tabs: const [
Tab(text: 'Page 1'),
Tab(text: 'Page 2'),
],
),
),
const SizedBox(height: 16),
//TabBarView
Expanded(
child: TabBarView(
controller: tabController,
children: [
Center(
child: Text("Page 1"),
),
Center(
child: Text("Page 2"),
),
],
),
)
],
),
);