I am new in a flutter, now when I am trying to display multiple cards inside a ListView on each tab in TabBarView I get this error
" Controller's length property (4) does not match the number of tabs (5) present in TabBar's tabs property. "
and here is my code, is there a way to do this?
this is the TabBar
child: TabBar(
tabs: [
Tab(child: Text("New", style: TextStyle(color: Colors.black),),),
Tab(child: Text("Indoor", style: TextStyle(color: Colors.black),),),
Tab(child: Text("Outdoor", style: TextStyle(color: Colors.black),),),
Tab(child: Text("Furniture", style: TextStyle(color: Colors.black),),),
],
indicatorColor: Color.fromRGBO(230, 0, 49, 0.86),
),
and this is the TabBarView
child: TabBarView(
children:
[
//First tab
ListView(
children: [
Card(
clipBehavior: Clip.antiAlias,
elevation: 0.5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.only(
left: 0.0, top: 10.0, bottom: 0.0, right: 0.0),
child: InkWell(
onTap: () {
},
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(alignment: Alignment.bottomCenter, children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Ink.image(
height: 200,
image: AssetImage('assets/images/kitchen.jpg'),
fit: BoxFit.fitWidth),
),
]),
ListTile(
title: Text(
"Project Name",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
subtitle: Text(
"Project details descriptions",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.grey),
),
),
],
),
),
),
),
],
),
ListView(
children: [
Card(
clipBehavior: Clip.antiAlias,
elevation: 0.5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.only(
left: 0.0, top: 10.0, bottom: 0.0, right: 0.0),
child: InkWell(
onTap: () {
},
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(alignment: Alignment.bottomCenter, children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Ink.image(
height: 200,
image: AssetImage('assets/images/food_tables.jpg'),
fit: BoxFit.fitWidth),
),
]),
ListTile(
title: Text(
"Project Name",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
subtitle: Text(
"Project details descriptions",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.grey),
),
),
],
),
),
),
),
],
),
],
),
You have 4 tabs but you have 2 listview in tabbarViews.
For solution you have to remove 2 tabs or you can add 2 more widget in tabbarview
TabBarView(children: [
// 1.tab
Container(),
// 2.tab
Container(),
// 3.tab
Container(),
// 4.tab
Container(),
]);