Home > Software engineering >  How To Remove Padding Or Margin Between two TabController in flutter
How To Remove Padding Or Margin Between two TabController in flutter

Time:12-13

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 https://ibb.co/NCF4dMj

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('اجر شش سیلندر')),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response:

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

  • Related