我想在 flutter/dart 中創建帶有下拉列表的多個過濾器列表

Question

我是新的 flutter 開發人員。

所以我想用下拉菜單創建多個過濾器列表......

這個過濾器有 3 個下拉小部件，這樣做的預期結果是搜索結果可以相互組合。

我對如何開始做有點困惑，你能給我與這個問題相關的建議/參考/鏈接嗎？

到目前為止，我只能進行一次搜索（我是從搜索代表那里得到的）

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;
  }

如何使用多個過濾器和下拉菜單來實現它？ 謝謝你！

Answer 1

您要做的是在 api 調用之后，將結果存儲在列表中（例如 allKosts）。 然后提供一個 getter 來獲取列表，帶有過濾器。 每當您更改過濾器時，您都希望調用 setState 並且 getter 的值將自動更新。

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();