I'm getting a bottom underline in the TabBar. How to remove it?

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"),
            ),
          ],
        ),
      )
    ],
  ),
);

Result->