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.
2
Answers
It sounds like you’re dealing with an unwanted underline or border at the bottom of the
TabBar
. You’ve already tried some approaches like settingindicatorWeight
to0
,indicatorColor
totransparent
, and wrapping theTabBar
in aMaterial
widget, but the underline persists.To remove the underline, try the following adjustments:
1. Set the
indicator
tonull
:If you don’t want any underline or indicator at all, you can set the
indicator
property of theTabBar
tonull
.2. Remove the
indicatorWeight
:Ensure that the
indicatorWeight
is completely removed since setting it to0
might still cause issues.Here’s how your code could look with these adjustments:
3. Ensure the TabBar is not inside a Material widget with a
borderOnForeground
setting:If you have wrapped the
TabBar
inside aMaterial
widget elsewhere, ensure thatborderOnForeground
is not interfering.4. Check for Other Widgets:
If none of the above works, double-check other widgets wrapping the
TabBar
, likeContainer
or any parentMaterial
widget, to ensure they aren’t causing any unintended styling issues.This should resolve the unwanted underline in the
TabBar
. If the issue persists, please let me know, and we can explore further adjustments.Try below code, add
dividerColor: Colors.transparent,
Read more about dividerColorResult->![image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)