Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Tab container in the Tabbar is not working

I am trying to create the Tabbar with 3 tabs but the result is not as expected.
Also, In the results white underline below the tabs.
Any help will be appreciated, Thank you!!!

Code:

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.grey[100],
        child: Column(
          children: [
            Expanded(
              child: DefaultTabController(
                length: 3,
                child: Column(
                  children: [
                    Material(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 18.0, right: 18),
                        child: Container(
                          height: 45,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(18),
                              border: Border.all(
                                color: const Color.fromARGB(255, 225, 220, 220),
                              ),
                              color: const Color.fromARGB(255, 225, 222, 222)),
                          child: TabBar(
                            physics: const ClampingScrollPhysics(),
                            padding: const EdgeInsets.all(10),
                            indicatorSize: TabBarIndicatorSize.label,
                            indicator: BoxDecoration(
                              borderRadius: BorderRadius.circular(18),
                              color: Colors.white,
                            ),
                            tabs: [
                              Container(
                                height: 42,
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Text(
                                    "11月分",
                                    style: TextStyle(color: Colors.black),
                                  ),
                                ),
                              ),
                              Container(
                                height: 42,
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Text(
                                    "12月分",
                                    style: TextStyle(color: Colors.black),
                                  ),
                                ),
                              ),
                              Container(
                                height: 42,
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Text(
                                    "1月分",
                                    style: TextStyle(color: Colors.black),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: TabBarView(
                        children: [
                          Center(child: Text("chat")),
                          Center(child: Text("messages")),
                          Center(child: Text("request")),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Current result:

enter image description here

Expected output:

enter image description here

Tags:

2

Answers


  1. 0

    This code is to remove the white line in the tab bar

         splashFactory: NoSplash.splashFactory,
      overlayColor: MaterialStateProperty.resolveWith (
            (Set  states) {
          return states.contains(MaterialState.focused) ? null : Colors.transparent;
        },
      ),
  dividerColor: Colors.transparent,

    Just wrap it inside the TabBar

    Login or Signup to reply.
  2. 0

    Add initstate like this in your code

      @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

    After that in the Tab bar add controller.

    Also add the state with TickerProviderStateMixin like this

     class _HomeState extends State<Home> with TickerProviderStateMixin{
// your current code //
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search