Can I use flutter's TabBar for filtering a list of cards?

Question

I have created a TabBar inside my AppBar with the code below. I'm curious if I can use this TabBar as a filtering mechanism like the image below. I feel like there might already be a widget available for this, but I can't find any evidence of that. If I do have to use the TabBar, how would I go about toggling each option and filtering based on this list of toggles.

Current code:

import 'package:flutter/material.dart';

class ExploreDetail extends StatefulWidget {
  static const routeName = 'explore_detail';

  @override
  _ExploreDetailState createState() => _ExploreDetailState();
}

class _ExploreDetailState extends State<ExploreDetail>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  List<Widget> tabs = [
    Tab(
      text: 'All',
    ),
    Tab(
      text: 'Experience Consulting',
    ),
    Tab(
      text: 'Front Office Transformation',
    ),
  ];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // Create TabController for getting the index of current tab
    _tabController = TabController(
      length: tabs.length,
      initialIndex: 0,
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    final Map category = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(kTextTabBarHeight + kToolbarHeight),
        child: AppBar(
          title: Text(
            category['title'],
            style: TextStyle(color: Colors.black),
          ),
          backgroundColor: Colors.white,
          iconTheme: IconThemeData(
            color: Colors.black,
          ),
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(kTextTabBarHeight),
            child: Align(
              alignment: Alignment.centerLeft,
              child: TabBar(
            tabs: tabs,
            controller: _tabController,
            indicatorColor: Colors.transparent,
            labelColor: Colors.blue,
            isScrollable: true,
            unselectedLabelColor: Colors.grey,
          ),
            ),
          ),
        ),
      ),
      body: Center(
        child: Text('list of cards will go here'),
      ),
    );
  }
}

Answer 1

You can handle the tab selections by adding an addListener method to your tabController in your initState(). And then you can filter your data by the selected tab option.

It will look like:

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    // Create TabController for getting the index of current tab
    _tabController = TabController(
      length: tabs.length,
      initialIndex: 0,
      vsync: this,
    );

     // Here is the addListener!
     _tabController.addListener(_handleTabSelection);
  }

And then:

void _handleTabSelection() {
    if (_tabController.indexIsChanging) {
      switch (_tabController.index) {
        case 0:
          filterData('all');
          break;
        case 1:
          filterData('experienceConsulting');
          break;
        case 2:
          filterData('frontOfficeTransformation');
          break;
      }
    }
  }