Ytukyg

I have a list of the countries name in local json. I can load my local json and assign to DropDown button. there is a 193 countries in json file as ex. shown below. If I want to select United State, user have to scroll all the way down. How can enter a countries name such as; if I user enter U or u the dropdown can makes quick filtering and list all the countries that starts with U such as United State. How do I search in Flutter DropDownbutton items?

{

    "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"

            },

One way is to use a TextEditingController to filter your ListView like this:

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,

        ));

  }

}