I want to create multiple filter list with dropdown in flutter/dart

Question

I'm a new flutter developer.

So I want to create multiple filter lists with dropdowns...

This filter has 3 dropdown widgets, the expected result of this is that the search results can be combined with each other.

I'm kinda confused about how to start doing it, can you give me advice/reference/link related to this issue.

So far I just can do a single search (i got it from the search delegate)

Future<List<ModelKost>> getFilter({String? query}) async {
    final prefs = await SharedPreferences.getInstance();
    const key = 'token';
    final value = prefs.get(key) ?? 0;

    try {
      var response = await http.get(Uri.parse('$serverUrl/home'), headers: {
        'Accept': 'application/json',
        'Authorization': 'Bearer $value'
      });
      if (response.statusCode == 200) {
        data = json.decode(response.body)['data'];
        results = data.map((e) => ModelKost.fromJson(e)).toList();
        if (query != null) {
          results = results
              .where((e) =>
                  e.kabkot.toLowerCase().contains((query.toLowerCase())))
              .toList();
        }
      } else {
        debugPrint('fetch data error');
      }
    } on Exception catch (e) {
      debugPrint('error: $e');
    }
    sortHarga = results;
    return results;
  }

How to implement it with multiple filters and with dropdown? thank you!

Answer 1

What you want to do is after the api call, store the result inside a list (for example allKosts). Then provide a getter to get the list, with the filter. Whenever you change a filter, you want to call setState and the getter's value will be updated automatically.

List<ModelKost> allKosts = [];
String kabkotFilter = '';
String tipeKotFilter = '';

List<ModelKost> get filteredKosts =>
results.where((e) => e.kabkot.toLowerCase().contains((kabkotFilter.toLowerCase())) && e.tipeKot.toLowerCase() == tipeKotFilter.toLowerCase())).toList();