Flutter Controller's length property error

Viewed 43

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

  1. into first tab i should have 4 item
  2. into second tab i should have 1 item
  3. into third tab i should have 1 item
  4. into fourth tab i should have 1 item
  5. 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);
}
1 Answers

Remove this line of code above of the GridView

for (int k = 0; k < _books[i].pages.length; k++)

It's making multiple gridViews and you shouldn't itertate over book content in there.

Related