flutter - 如何在 flutter 可搜索下拉列表中从 api 列表中搜索数据

Question

我处于一种情况，我必须以某种方式实现国家/地区城市/州下拉列表，我使用普通的 flutter 下拉按钮来管理事物，这很有效，但问题是我无法在该下拉按钮中搜索数据，因此用户必须滚动和发现那里的国家或城市是非常糟糕的用户体验，所以我找到了这个包 https://pub.dev/packages/searchable_dropdown正在工作，但我不确定如何在我的代码中实现该搜索，这是我的代码来自 future 的数据

    import 'package:flutter/material.dart';
// import 'package:foodfromforeign1/models/country.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:flutter_typeahead/flutter_typeahead.dart';

void main() => runApp( MyApp());



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: 'Flutter Demo',
      theme:  ThemeData(
        primarySwatch: Colors.red,
      ),
      home:  MyHomePage(title: 'Users'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() =>  _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 final String url = "http://10.0.2.2/fff/api/allcountries/";
 List data = List(); //line
Future<String> getSWData() async {
    var res = await http .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);

    setState(() {
      data = resBody.;
    });

    return "Sucess";
  }

    @override
  void initState() {
    this.getSWData();
    super.initState();
  }

@override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar:  AppBar(
        title:  Text(widget.title),
      ),
      body:Container(
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
        child:Column(
         children: <Widget>[
           TypeAheadField<data>(
      onSuggestionSelected: (data) => print('selected: ${data.name} ${data.id}'),
      suggestionsCallback: (s) => data.where((c) => c.name.toLowerCase().contains(s.toLowerCase())),
      itemBuilder: (ctx, data) => Text(data.name, textScaleFactor: 2,),
    )
         ],

        ),  




      ),
    );

  }
}

Answer 1

除了使用插件之外的另一个选择是使用 Autocomplete小部件。这应该会在其他小部件上膨胀自动完成列表。如果您使用的是 List<Object>从 API 响应中，您可以将需要过滤的关键字映射到 List<String>在自动完成小部件中使用。该指数可作为引用List<Object>获取对象。

var fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

_autoCompleteTextField() {
  return Autocomplete(
    optionsBuilder: (TextEditingValue textEditingValue) {
      if (textEditingValue.text == '') {
        return const Iterable<String>.empty();
      }
      return fruits.where((String option) {
        return option
            .toLowerCase()
            .contains(textEditingValue.text.toLowerCase());
      });
    },
    onSelected: (String selection) {
      debugPrint('You just selected $selection');
    },
  );
}