Question

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

    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

对我来说，我推荐此插件

DropdownSearch

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

在线和离线项目
可搜索下拉列表
三种下拉模式：菜单/底页/对话框
材料下拉列表
易于自定义的用户界面
轻松实现到无状态窗口组件
处理主题：黑暗与光明

https://pub.dev/packages/dropdown_search

如何从Flutter可搜索下拉列表中的api列表中搜索数据

1 个答案: