How do I create Search By Filter query on List view built from stored collections of objects

878 views

Skip to first unread message

Michael Tawiah Sowah

unread,

Sep 13, 2017, 7:38:24 AM9/13/17

to Flutter Dev

How do I create a Search By Filter query like the one in stocks app https://github.com/flutter/flutter/tree/master/examples/stocks

 Iterable<Stock> _filterBySearchQuery(Iterable<Stock> stocks) {

    if (_searchQuery.text.isEmpty)

      return stocks;

    final RegExp regexp = new RegExp(_searchQuery.text, caseSensitive: false);

    return stocks.where((Stock stock) => stock.symbol.contains(regexp));

}

Ton this data structure

stored collections of objects

class Country {
  final String name;
  final String dialCode;
  final String code;

  const Country({this.name, this.dialCode, this.code});
}

const Countries = const <Country>[ 
  
  const   Country(
    name: "Afghanistan",
    dialCode: "+93",
    code: "AF"
  ),
  const   Country(
      name: 'Aland Islands',
      dialCode: '+358',
      code: 'AX'
  ),
  const   Country(
    name: "Albania",
    dialCode: "+355",
    code: "AL"
  ),
  const   Country(
    name: "Algeria",
    dialCode: "+213",
    code: "DZ"
  )
]

and use the list view on the page.

my list view on the page is

List view

@override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: _isSearching ? buildSearchBar() : buildAppBar(),//new AppBar(title: new Text('Choose a country')),
      body: new ListView.builder(
        padding: new EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 20.0),
        itemCount: Countries.length,
        itemBuilder: (BuildContext context, int index) {
          return new Container(
            child: new Material(
              child: new InkWell(
                onTap: (){
                  // print(new Text('${Countries[index].dialCode}'));
                  Navigator.of(context).pop('${Countries[index].name},${Countries[index].dialCode}');
                  },
                child: new Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Expanded(
                      flex: 10,
                      child: new Padding(
                        padding: new EdgeInsets.fromLTRB(20.0, 12.0, 0.0, 12.0),
                        child: new Text(
                          '${Countries[index].name}',
                          style: new TextStyle(
                            fontSize: 14.9,
                            color: Colors.grey[800]
                          ),
                        ),
                      ),
                    ),
                    //
                    new Expanded(
                      flex: 3,
                      child: new Padding(
                        padding: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
                        child: new Text(
                          '${Countries[index].dialCode}',
                          style: new TextStyle(
                            fontSize: 14.9,
                            color: Colors.pink[700]
                          ),
                        ),
                      ),
                    ), 
                  ],
                ),
              ),
            ),
          );
        },
      ),
      backgroundColor: Colors.white,
    );
    
  }

Reply all

Reply to author

Forward

0 new messages