flutter-dynamic-tabcontroller-ticker-mixin

Flutter Dynamic TabController with TickerProviderStateMixin

Problem

When building a TabBar with dynamic tabs (tabs that show/hide based on feature availability, user preferences, or async state), recreating the TabController during the widget lifecycle causes a crash because SingleTickerProviderStateMixin only allows one ticker to be created.

Context / Trigger Conditions

Error message:

_YourStateClass is a SingleTickerProviderStateMixin but multiple tickers were created.
A SingleTickerProviderStateMixin can only be used as a TickerProvider once.
If a State is used for multiple AnimationController objects, or if it is passed to other
objects and those objects might use it more than one time in total, then instead of mixing
in a SingleTickerProviderStateMixin, use a regular TickerProviderStateMixin.

When this happens:

• You dispose and recreate a TabController when tab count changes
• You have tabs that conditionally appear based on async state (e.g., Riverpod providers)
• Feature flags control which tabs are visible
• Tab visibility depends on API availability or user permissions

Solution

Step 1: Change the Mixin

Replace SingleTickerProviderStateMixin with TickerProviderStateMixin:

// WRONG - crashes when TabController is recreated
class _MyScreenState extends State<MyScreen>
    with SingleTickerProviderStateMixin {

// CORRECT - allows multiple TabControllers over widget lifetime
class _MyScreenState extends State<MyScreen>
    with TickerProviderStateMixin {

Step 2: Track Tab Count State

Keep a state variable to track the current tab configuration:

bool? _lastFeatureAvailable;
TabController? _tabController;

int get _tabCount => (_lastFeatureAvailable ?? false) ? 4 : 3;

void _initTabController() {
  _tabController?.removeListener(_onTabChanged);
  _tabController?.dispose();
  _tabController = TabController(
    length: _tabCount,
    vsync: this,
  );
  _tabController!.addListener(_onTabChanged);
}