Search code examples
flutterdartpaddingmargintabbar

How to remove Padding or Margin between two TabController in Flutter


I create two nested TabController in flutter but i have large margin or padding between two tab

you can see this space in below picture

enter image description here

i want to reduce this padding or margin , but i don't know how i can do ?

this is my home component code:

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
        return DefaultTabController(
        initialIndex: 5,
        length: 6,
        child: Scaffold(
          endDrawer: Directionality(
          textDirection: TextDirection.rtl, child: NavMenu() ),
          appBar: AppBar(
            title: Text("داشبورد"),
            bottom: TabBar(
              tabs: [
                Tab(
                  child: Container(
                    child: Text(
                      'چت',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'نردیان',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'خرگوش',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'کامی',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'همون',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      ' نردبان',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
              ],
              isScrollable: true,
              indicatorColor: Colors.white,
              indicatorWeight: 6.0,
            ),
          ),

          body: TabBarView(
            children: [
              ChatTabs(0xffff1111),
              ChatTabs(0xffff1111),
              ChatTabs(0xffff1111),
              ChatTabs(0xffff1111),
              ChatTabs(0xffff1111),
              NardebanTabs(0xffff1111)
            ],
            
          ),
        ));
  }
}

and this is my children tab compenent (ChatTabs):

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          backgroundColor: Colors.blue,
          elevation: 0,
          bottom: TabBar(
            controller: _tabController,
            isScrollable: true,
            indicatorWeight: 3.0,
            indicatorColor: Colors.white,
            unselectedLabelColor: Colors.white,
            tabs: [
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 0
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 0
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 1
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 1
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 2
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 2
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 3
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 3
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 4
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 4
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 5
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 5
                            ? Colors.white
                            : Colors.white70)),
              ),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            Ladder(),
            Container(
              height: 200.0,
              child: Center(child: Text('گوج')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('هع')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('سن الله')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('اجر اصیل')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('اجر شش سیلندر')),
            ),
          ],
        ),
      ),
    );
  }
}


Solution

  • your chat tab class appbar height is a problem, fix toolbarHeight to 1 in chattabs app bar

    @override
     Widget build(BuildContext context) {
      return DefaultTabController(
      length: 6,
      child: Scaffold(
        appBar: AppBar(
          toolbarHeight: 1,
          automaticallyImplyLeading: false,
          backgroundColor: Colors.blue,
          elevation: 0,
          bottom: TabBar(
            controller: _tabController,
            isScrollable: true,
            indicatorWeight: 3.0,
            indicatorColor: Colors.white,
            unselectedLabelColor: Colors.white,
            tabs: [
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 0
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 0
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 1
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 1
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 2
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 2
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 3
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 3
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 4
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 4
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 5
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 5
                            ? Colors.white
                            : Colors.white70)),
              ),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            Ladder(),
            Container(
              height: 200.0,
              child: Center(child: Text('گوج')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('هع')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('سن الله')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('اجر اصیل')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('اجر شش سیلندر')),
            ),
          ],
          ),
        ),
      );
      }
    }
    

    just paste this code in ChatTabs class