title: How to implement the search action for each tab in Tabbar
body: <p>I have a page with 2 tabs in the TabBar, as it follows:</p>
  
  <p><a href="https://i.stack.imgur.com/VMllX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VMllX.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/8YBrh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8YBrh.png" alt="enter image description here"></a></p>
  
  <pre><code>class SearchByCityOrPerson extends StatefulWidget {
  
  
   SearchByCityOrPerson({Key key, this.title}) : super(key: key);
  
    final String title;
  
    @override
    _SearchByCityOrPerson createState() =&gt; _SearchByCityOrPerson();
  }
  
  class _SearchByCityOrPerson extends State&lt;SearchByCityOrPerson&gt; {
  
    List&lt;String&gt; _cities = ['Albania', 'Andorra', 'Armenia', 'Austria',
      'Azerbaijan', 'Belarus', 'Belgium', 'Bosnia and Herzegovina', 'Bulgaria',
      'Croatia', 'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland',
      'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland',
      'Italy', 'Kazakhstan', 'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania',
      'Luxembourg', 'Macedonia', 'Malta', 'Moldova', 'Monaco', 'Montenegro',
      'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia',
      'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden',
      'Switzerland', 'Turkey', 'Ukraine', 'United Kingdom', 'Vatican City'];
  
    List&lt;String&gt; _persons = ["John Smith", "Alex Johnson", "Jane Doe", "Eric Johnson", "Michael Eastwood", "Benjamin Woods"];
  
    List&lt;String&gt; _filteredList = [];      
    TextEditingController controller = new TextEditingController();
  
    String filter = "";
    Icon actionIcon = new Icon(Icons.search);
    Widget appBarTitle = new Text("Search...");
  
  
  
    @override
    void dispose() {
      controller.dispose();
      super.dispose();
    }
  
    @override
    void initState() {
     setState(() {          
        _filteredList = _cities;
      });
      controller.addListener(() {
        if (controller.text.isEmpty) {
          setState(() {
            filter = "";
            _filteredList = _cities;
          });
        } else {
          setState(() {
            filter = controller.text;
          });
        }
      });
      super.initState();
    }
  
  
    @override
    Widget build(BuildContext context) {
      ListTile personListTile(String bookOrPerson) =&gt;
          ListTile(
            title: Text(
              bookOrPerson,
              style: TextStyle(
                  color: Colors.black45, fontWeight: FontWeight.bold),
            ),);
  
      Card personCard(bookOrPeson) =&gt;
          Card(
            child: Container(
              decoration: BoxDecoration(color: Colors.grey[300]),
              child: personListTile(bookOrPeson),
            ),
          );
  
      if ((filter.isNotEmpty)) {
        List&lt;String&gt; tmpList = new List&lt;String&gt;();
        for (int i = 0; i &lt; _filteredList.length; i++) {
          if (_filteredList[i].toLowerCase().contains(
              filter.toLowerCase())) {
            tmpList.add(_filteredList[i]);
          }
        }
        _filteredList = tmpList;
      }
  
      final appBody = Container(
        child: ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: _cities == null ? 0 : _filteredList.length,
          itemBuilder: (BuildContext context, int index) {
            return personCard(_filteredList[index]);
          },
        ),
      );
  
      final appTopAppBar = AppBar(
        elevation: 0.1,
        bottom: TabBar(
          tabs: [
            GestureDetector(
              child: Text("City"),
              onTap: (){
                _filteredList = _cities;
              },
            ),
  
            GestureDetector(
              child: Text("Person"),
              onTap: (){
                _filteredList = _persons;
              },
            ),
          ]
        ),
        title: appBarTitle,
        actions: &lt;Widget&gt;[
          new IconButton(
            icon: actionIcon,
            onPressed: () {
              setState(() {
                if (this.actionIcon.icon == Icons.search) {
                  this.actionIcon = new Icon(Icons.close);
                  this.appBarTitle = new TextField(
                    controller: controller,
                    decoration: new InputDecoration(
                      /*prefixIcon: new Icon(Icons.search, color: Colors.white),*/
                      hintText: "Search...",
                      hintStyle: new TextStyle(color: Colors.white),
                    ),
                    style: new TextStyle(
                      color: Colors.white,
                    ),
                    autofocus: true,
                    cursorColor: Colors.white,
                  );
                } else {
                  this.actionIcon = new Icon(Icons.search);
                  this.appBarTitle = new Text("Cities");
                  _filteredList = _cities;
                  controller.clear();
                }
              });
            },
          ),
        ],
      );
  
      return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: appTopAppBar,
          body: appBody,
        ),
      );
    }
  
  }
  </code></pre>
  
  <p>As you may have seen in the screen shoots the problem is whe the secon tab "Search by Person" option is tabed, it should show all the list of persons and allow the user to search by person name, I tried to achieve it in the on tab method of each tabs but it needs to be refreseh somehow and I suppose there is a better way to implement it, how should I implement it taking into account that the lists <strong><em>_cities</em></strong> and <strong><em>_persons</em></strong> will be loaded in a future doing an api call.</p>