TabController length

[chanan]

When I have 3 tabs in my tab bar all is good but when I try to add a 4th I get: Controller's length property (3) does not match the number of tabs (4) present in TabBar's tabs property.

The TabBar and the TabBarView both have 4 children.

@override
  Widget build(BuildContext context, WidgetRef ref) {
    final tabController = useTabController(initialLength: 4);
    return Padding(
      padding: const EdgeInsets.all(8),
      child: Column(
        children: [
          TabBar(
            controller: tabController,
            tabs: const [
              Tab(
                text: 'About',
              ),
              Tab(
                text: 'Map',
              ),
              Tab(
                text: 'Reviews',
              ),
              Tab(
                text: 'Notes',
              ),
            ],
          ),
          Expanded(
            child: TabBarView(
              controller: tabController,
              children: const [
                Center(
                  child: Text("It's cloudy here"),
                ),
                Center(
                  child: Text("It's rainy here"),
                ),
                Center(
                  child: Text("It's sunny here"),
                ),
                Center(
                  child: Text('Notes'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

[chanan]

Restarting the app resolves the issue of course - State doesn't get wiped out on hot reload, so it still thought I had 3 tabs although I set the initialLength to 4 :)

[ywake]

I also faced the same issue.
With useTabController, the Widget does not become a TickerProviderStateMixin, so changing the length is not possible.
Therefore, I had to use StatefulHookWidget with TickerProviderStateMixin to work around the issue.