title: Can I use flutter's TabBar for filtering a list of cards?
body: <p>I have created a <code>TabBar</code> inside my <code>AppBar</code> with the code below. I'm curious if I can use this <code>TabBar</code> 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.</p>
  <p><a href="https://i.stack.imgur.com/WxKak.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WxKak.png" alt="enter image description here" /></a></p>
  <p>Current code:</p>
  <pre><code>import 'package:flutter/material.dart';
  
  class ExploreDetail extends StatefulWidget {
    static const routeName = 'explore_detail';
  
    @override
    _ExploreDetailState createState() =&gt; _ExploreDetailState();
  }
  
  class _ExploreDetailState extends State&lt;ExploreDetail&gt;
      with SingleTickerProviderStateMixin {
    TabController _tabController;
    List&lt;Widget&gt; 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'),
        ),
      );
    }
  }
  </code></pre>