Tab bar in Flutter : How to execute a function while transitioning through tabs?

1.2k Views Asked by At

I'm facing an issue with tab bar. Actually there are four tabs (i.e. four categories) in my application. There's a single bloc that fetches data from the repository based on the category id. So I have added a _tabController.addListener(_onTabChanged); property and I call the bloc event based on the current tab i.e. current category. But the problem is that addListener execute that line on reaching that tab not while animating through the previous one to the next one. So this shows the contents of previous tab for a second on the next tab and then reloads its desired content which is very annoying. So my question is that is there a way I can request the bloc with desired category id during the animation from one tab to another not on reaching there??

Here's the code:

class CategoryTab extends StatefulWidget {
  final List<Category> categories;

  const CategoryTab({Key key, this.categories}) : super(key: key);
  @override
  _CategoryTabState createState() => _CategoryTabState();
}

class _CategoryTabState extends State<CategoryTab>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  int activeTab;

  @override
  void initState() {
    super.initState();
    activeTab = 0;
    _tabController = TabController(
        vsync: this, length: widget.categories.length, initialIndex: activeTab);
    _tabController.addListener(_onTabChanged);
    context.read<SoundBloc>().add(GetSounds(categoryId: '1'));
    print(_tabController.index);
  }

  void _onTabChanged() {
    if (!_tabController.indexIsChanging && activeTab != _tabController.index) {
      activeTab = _tabController.index;
      context
          .read<SoundBloc>()
          .add(GetSounds(categoryId: (activeTab + 1).toString()));
    }
  }

  @override
  void dispose() {
    _tabController.removeListener(_onTabChanged);
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            'Sounds',
            style: Theme.of(context).textTheme.headline5,
          ),
          bottom: TabBar(
            controller: _tabController,
            isScrollable: true,
            indicator: CustomTabIndicator(),
            physics: BouncingScrollPhysics(),
            unselectedLabelColor: Colors.redAccent,
            indicatorSize: TabBarIndicatorSize.tab,
            tabs: widget.categories
                .map((category) => CatgoryTabItemWidget(category: category))
                .toList(),
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: widget.categories
              .map((category) => SoundView(
                    category: category,
                  ))
              .toList(),
        ),
      ),
    );
  }
}

Note category id starts from 1 i.e. 1, 2, 3, 4 (4 categories).

0

There are 0 best solutions below