Flutter SearchView

The search function will filter the listview with a matching string from the user input.

About Application

In this app I’m using two list-view. List-view 1 has all the list items and List-view 2 used to save the searched items.

In HomeScreen.dart I’m Created one constructor for checking the conditions. If searchEdit.text.isEmpty - It will display all the list items or else it will display searched items.

_HomeScreenState() {
  _searchEdit.addListener(() {
    if (_searchEdit.text.isEmpty) {
      setState(() {
        _isSearch = true;
        _searchText = "";
      });
    } else {
      setState(() {
        _isSearch = false;
        _searchText = _searchEdit.text;
      });
    }
  });
}

Search-View Code

Widget _searchListView() {
  _searchListItems = new List<String>();
  for (int i = 0; i < _socialListItems.length; i++) {
    var item = _socialListItems[i];

    if (item.toLowerCase().contains(_searchText.toLowerCase())) {
      _searchListItems.add(item);
    }
  }
  return _searchAddList();
}

Widget _searchAddList() {
  return new Flexible(
    child: new ListView.builder(
        itemCount: _searchListItems.length,
        itemBuilder: (BuildContext context, int index) {
          return new Card(
            color: Colors.cyan[100],
            elevation: 5.0,
            child: new Container(
              margin: EdgeInsets.all(15.0),
              child: new Text("${_searchListItems[index]}"),
            ),
          );
        }),
  );
}

Full source code

https://github.com/vignesh7501/Flutter-SerachView

Screenshots

All items and Searched items.