How to remove Padding or Margin between two TabController in Flutter
115
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
Author by
Sara
Updated on January 02, 2023Comments
-
Sara over 1 year
I create two nested
TabControllerin flutter but i have large margin or padding between two tabyou can see this space in below picture
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('اجر شش سیلندر')), ), ], ), ), ); } } -
Sara over 2 yearshow i can do that? please recode that
-
Hamza Siddiqui over 2 yearsi edit my answer you can just copy and paste the code