web-dev-qa-db-ja.com

Flutterドロップダウンボタンで検索するには

私は地元のjsonで国名のリストを持っています。ローカルjsonをロードしてドロップダウンボタンに割り当てることができます。 exとしてjsonファイルには193か国があります。下に示された。 United Stateを選択したい場合、ユーザーは一番下までスクロールする必要があります。どのように国名を入力できますか？ユーザーがUまたはuを入力した場合、ドロップダウンを使用すると、フィルタリングが迅速に行われ、米国などUで始まるすべての国がリストされます。 Flutter DropDownbuttonアイテムを検索するにはどうすればよいですか？

{
    "country": [
            {
                "countryCode": "AD",
                "countryName": "Andorra",
                "currencyCode": "EUR",
                "isoNumeric": "020"
            },
            {
                "countryCode": "AE",
                "countryName": "United Arab Emirates",
                "currencyCode": "AED",
                "isoNumeric": "784"
            },
            {
                "countryCode": "AF",
                "countryName": "Afghanistan",
                "currencyCode": "AFN",
                "isoNumeric": "004"
            },
dartflutterfilteringdropdown
4
Nick

代わりにsearchable_dropdownパッケージを使用できます： https://pub.dev/packages/searchable_dropdown

そして、これが私のサンプルコードです searchable_dropdownはクラスリストでは機能しません

私の例のようなクラスリストを使用する場合は、次のことを確認してください

  @override
  String toString() {
    return this.key;
  }
2
mike

1つの方法は、TextEditingControllerを使用してListViewを次のようにフィルタリングすることです。

class YourPage extends StatefulWidget {
  @override
  State createState() => YourPageState();
}

class YourPageState extends State<YourPage> {
  List<Country> countries = new List<Country>();
  TextEditingController controller = new TextEditingController();
  String filter;

  @override
  void initState() {
    super.initState();
    //fill countries with objects
    controller.addListener(() {
      setState(() {
        filter = controller.text;
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Material(
        color: Colors.transparent,
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            new Padding(
                padding: new EdgeInsets.only(top: 8.0, left: 16.0, right: 16.0),
                child: new TextField(
                  style: new TextStyle(fontSize: 18.0, color: Colors.black),
                  decoration: InputDecoration(
                    prefixIcon: new Icon(Icons.search),
                    suffixIcon: new IconButton(
                      icon: new Icon(Icons.close),
                      onPressed: () {
                        controller.clear();
                        FocusScope.of(context).requestFocus(new FocusNode());
                      },
                    ),
                    hintText: "Search...",
                  ),
                  controller: controller,
                )),
            new Expanded(
              child: new Padding(
                  padding: new EdgeInsets.only(top: 8.0),
                  child: _buildListView()),
            )
          ],
        ));
  }

  Widget _buildListView() {
    return ListView.builder(
        itemCount: countries.length,
        itemBuilder: (BuildContext context, int index) {
          if (filter == null || filter == "") {
            return _buildRow(countries[index]);
          } else {
            if (countries[index].countryName
                .toLowerCase()
                .contains(filter.toLowerCase())) {
              return _buildRow(countries[index]);
            } else {
              return new Container();
            }
          }
        });
  }

  Widget _buildRow(Country c) {
    return new ListTile(
        title: new Text(
          c.countryName,
        ),
        subtitle: new Text(
          c.countryCode,
        ));
  }
}
1
SnakeyHips