I this sample code witch i just created to describe my problem on Flutter with TabBarView, I want to have 5 tabs with nested GridView inside that with count of each parent's child count that its _books named. it means i want to have 5 tab with
- into first tab i should have 4 item
- into second tab i should have 1 item
- into third tab i should have 1 item
- into fourth tab i should have 1 item
- into fifth tab i should have 1 item
but in my code i get this error:
Controller's length property (5) does not match the number of tabs (8) present in TabBar's tabs property.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample',
home: Home(),
);
}
}
class Home extends StatefulWidget {
@override
State<StatefulWidget> createState() => _Home();
}
class _Home extends State<Home> with TickerProviderStateMixin {
late TabController _tabController;
final List<Books> _books = [
Books(1, [
Pages(1, '___a'),
Pages(2, '___a'),
Pages(3, '___a'),
Pages(4, '___a'),
]),
Books(2, [Pages(1, '___b'),]),
Books(3, [Pages(1, '___c'),]),
Books(4, [Pages(1, '___d'),]),
];
@override
void initState() {
super.initState();
_tabController = TabController(length: 5, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
TabBarView(controller: _tabController, children: [
for (int i = 0; i < _books.length; i++)
for (int k = 0; k < _books[i].pages.length; k++)
GridView.builder(
padding: EdgeInsets.zero,
scrollDirection: Axis.vertical,
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 1,
mainAxisSpacing: 1,
crossAxisCount: 1,
),
itemCount: _books[k].pages.length,
itemBuilder: (BuildContext context, index) {
final pageId = _books[k].pages[index].pageId;
final pageTitle = _books[k].pages[index].pageTitle;
return Container(
margin: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.black,
),
alignment: Alignment.center,
child: Text('($pageId) - ($pageTitle)'),
);
}),
]),
],
),
);
}
}
class Books {
final int bookId;
final List<Pages> pages;
Books(this.bookId, this.pages);
}
class Pages {
final int pageId;
final String pageTitle;
Pages(this.pageId, this.pageTitle);
}