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