SmartRefresher's multiple refresh controllers error in TabContainer

Question

Flutter TabContainer with SmartRefresher Error

I'm trying to use a TabContainer from the tab_container package in Flutter, along with SmartRefresher on each tab. However, I'm encountering an error that says, Don't use one refreshController to multiple SmartRefresher, it will cause some unexpected bugs mostly in TabBarView. This happens when I'm using separate RefreshController instances for each tab.

What I Want to Achieve

I want to have a TabContainer with two tabs, each containing a SmartRefresher for pull-to-refresh functionality.

Error Description

The error occurs when I switch between tabs, indicating that the RefreshController is being reused across the tabs, which results in this issue.

Code

class AlarmsList extends StatelessWidget {
  final List<Alarm> alarms;
  final List<TriggeredAlarm> triggeredAlarms;
  final Future Function()? onRefresh;
  final Function(int) onDeleteAlarm;
  final Function(int) onDeleteTriggeredAlarm;
  
  // ...

  RefreshController untriggeredRefreshController =
      RefreshController(initialRefresh: false);
  RefreshController triggeredRefreshController =
      RefreshController(initialRefresh: false);

  // ...

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).primaryColorDark,
      child: TabContainer(
        color: Colors.white,
        tabEdge: TabEdge.top,
        controller: tabController,
        // ... tab styles and configuration ...

        children: [
          _buildUntriggeredAlarmsList(context),
          _buildTriggeredAlarmsList(context),
        ],
        tabs: [
          // ... tab labels ...
        ],
      ),
    );
  }

  Widget _buildUntriggeredAlarmsList(BuildContext context) {
    untriggeredRefreshController = RefreshController();
    return SmartRefresher(
      key: Key('untriggered'),
      enablePullDown: true,
      enablePullUp: false,
      controller: untriggeredRefreshController,
      onRefresh: () async {
        // ... refresh logic ...
      },
      // ... content ...
    );
  }

  Widget _buildTriggeredAlarmsList(BuildContext context) {
    triggeredRefreshController = RefreshController();
    return SmartRefresher(
      key: Key('triggered'),
      enablePullDown: true,
      enablePullUp: false,
      controller: triggeredRefreshController,
      onRefresh: () async {
        // ... refresh logic ...
      },
      // ... content ...
    );
  }

  // ... other functions ...
}

What I tried to do

1. Using final RefreshController

I initially created two final RefreshController instances within the class, one for "Untriggered Alarms" and one for "Triggered Alarms." I assigned these controllers to their respective SmartRefresher widgets.

2. Creating RefreshController in build Function

I also tried creating non-final RefreshController instances directly within the build function.

3. Giving Unique Keys

To ensure that each SmartRefresher is treated as a distinct widget, I assigned unique keys to them. I used Key('untriggered') and Key('triggered') to differentiate between the two.

4. Initializing RefreshController Directly

As a further troubleshooting step, I tried initializing the RefreshController objects directly within the SmartRefresher widgets.

SmartRefresher(
  controller: RefreshController(), // Tried this
  // ...
)

5. Removing Transition Builder

As a further troubleshooting step, I attempted to remove the transition builder from the TabContainer. My hope was that it might have been causing conflicts with the SmartRefresher. However, even after this removal, the error remained.