Listen to all events on Flutter's TabController

user_2191890 0
Viewed 770

If you want to know when the user changed the tab page you can use the regular TabController.addListener() method. But what about knowing all the user events, like, for example, the user started to scroll to another page?

I need to know when the user starts scrolling to a new page. Knowing that the user already scrolled to a new page is too late.

Is there any way to achieve it?

flutter tabs
2 Answers

Adding a listener to the tabController will only listen to the tab index change but to listen to the changing value (the index in double) you can add the listener to the animation of the tabController.

Here a full code, I am using flutter_hooks to create the tabController.

class TestTabListener extends HookWidget {
  const TestTabListener();

  @override
  Widget build(BuildContext context) {
    final tabController = useTabController(initialLength: 3);

    tabController.animation!.addListener(() {
      if (tabController.animation!.value != tabController.index) {
        {
          //code
          print("runing");
        }
      }
    });

    return Scaffold(
      body: TabBarView(
        controller: tabController,
        children: pages,
      ),
    );
  }

  static final pages = [
    Container(color: Colors.red),
    Container(color: Colors.black),
    Container(color: Colors.blue),
  ];
}

Be careful using a function here because it will be called multiple times, you might add condition.

user_131113450

simple detection will be like below:

tabBarController =
    TabController(length: 5, initialIndex: pageNumber, vsync: this);
tabBarController.addListener(() {
  changePage(tabBarController.index);
});
user_106085560
Related