[Material] Update TabController to support dynamic Tabs

[johnsonmh]

Description

Because DefaultTabController creates its TabController once (in initState), it is currently impossible to:

1. Modify the number of tabs you have after the first build.
2. Load tabs dynamically/asynchronous.
3. Update a TabBar and hot reload the changes.

This change adds an override to didUpdateWidget in DefaultTabController, it will detect updates to DefaultTabController.length and update the DefaultTabController.controller accordingly.

After the changes here, we can now do:

Related Issues

• Fixes DefaultTabController not working with dynamic data #20292
• Fixes Hot reload doesn't recognize change in length in DefaultTabController #18686
• Fixes Changing the number of tabs in a DefaultTabController doesn't fix the tabController's index if it's now out of range #28816
• Fixes When there is only one tab, it's not shown selected #15008

Tests

I added the following tests:

• Build a TabBar with three tabs, update it to have two tabs, then one tab, then two tabs again. App should never crash and DefaultTabController should be updated accordingly.
• When there is only one tab in a TabBar, it renders with the proper color (regression test for When there is only one tab, it's not shown selected #15008).

Checklist

Before you create this PR confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]). This will ensure a smooth and quick review process.

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I signed the CLA.
• I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
• I updated/added relevant documentation (doc comments with ///).
• All existing and new tests are passing.
• The analyzer (flutter analyze --flutter-repo) does not report any problems on my PR.
• I am willing to follow-up on review comments in a timely manner.

Breaking Change

Does your PR require Flutter developers to manually update their apps to accommodate your change?

• Yes, this is a breaking change (Please read Handling breaking changes).
  See: https://groups.google.com/forum/#!topic/flutter-announce/SfLv0x5zDQ0
• No, this is not a breaking change.

[HansMuller]

This looks like a good change: DefaultTabController.didUpdateWidget.didUpdateWidget definitely should DTRT when rebuilt with a new length.

I'd prefer to not make TabController.copyWith public. It introduces a problem with the lifetime the TabController's AnimationController, since TabController.dispose() will now apply to the original and all copies. Should be easy enough to deal with that in this one case, but I don't think we want to face the general problem (at least not yet).

[rami-a]

LGTM, just small comments

[HansMuller]

Looks good with a few cleanup suggestions.

[HansMuller]

LGTM with one small change.

[JamalBelilet]

Can you please merge this to the dev branch.

[wzieba]

Thanks @johnsonmh for your work on this!

Can we know ETA for releasing this?

[fellow7000]

This will be great to have it in the very nearest future, stuck with this problem today :-/

@johnsonmh any news on that?..

[johnsonmh]

Hi all! Glad this work is helpful to people.

This PR was merged sucessfully into master about a month ago. It is now following the regular release process. Since it's been about a month, it should be on the beta channel soon. And, keep in mind, you can start using this feature immediately by switching to the master channel.

[fellow7000]

@johnsonmh Hi! Thanks for prompt feedback!

Just changes to master and realized that this does not help me much, because I use TabController, not the DefaultTabController as I need to know the index of the selected Tab on screen.

Looks like your fix does not work for TabController (but it works for default one) :-/ Any ideas on that?

[johnsonmh]

@fellow7000 Sorry, I don't know how you would make this work with a regular TabController.

If all you need is the index of the currently selected tab, you could do that pretty easily with a DefaultTabController by adding a int _selectedIndex on your state object, and update it in the TabBar.onTap callback.

Something like:

int _selectedIndex = 0;

...

DefaultTabController(
  length: length,
  child: TabBar(
    tabs: _tabs,
    onTap: (i) => setState(() => _selectedIndex = i),
  ),
),