如何在颤动的可搜索下拉列表中从 api 列表中搜索数据答案

【问题标题】：How to Search data from api list in flutter searchable dropdown list如何在颤动的可搜索下拉列表中从 api 列表中搜索数据
【发布时间】：2020-04-20 09:01:24
【问题描述】：

我处于必须以某种方式实施乡村城市状态下拉列表的情况下，我使用正常的颤动下拉按钮管理事物，这是可行的，但问题是我无法在该下拉按钮中搜索数据，因此用户必须滚动并找到用户体验非常糟糕的国家或城市，所以我发现这个包https://pub.dev/packages/searchable_dropdown 可以工作，但我不确定如何在我的代码中实现该搜索这是我的代码来自未来的数据

    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,),
    )
         ],

        ),  




      ),
    );

  }
}

【问题讨论】：

“所以我愿意为这类工作提供更好的解决方案” - 例如this？
是将国家/地区的 id 返回给我以传递给下一个函数
当我创建值字符串时，我上面的代码现在可以工作了，,,，但是他们仍然可以通过任何方式获取 id，因为我将值分配给 name 然后它可以工作，但我需要获取 id还有
TypeAheadField<T> 小部件可以使用任何数据模型 - 这里 T 可以是您的自定义类存储名称和 id
suggestionsCallback: (pattern) { return CitiesService.getSuggestions(pattern); }，这是什么数据列表？而这种颤动的模式是什么，如此混乱

标签： flutter

【解决方案1】：

我推荐这个插件

下拉搜索

具有项目搜索功能的 Flutter 简单而强大的 DropdownSearch，可以使用离线项目列表或过滤 URL 来轻松自定义。它有很多功能，例如：

线上线下商品
可搜索的下拉菜单
三种下拉模式：Menu/BottomSheet/Dialog
材质下拉菜单
易于定制的用户界面
在 statelessWidget 中轻松实现
处理主题：黑暗和光明

https://pub.dev/packages/dropdown_search

【讨论】：