How to Search data from api list about searchable_dropdown HOT 24 CLOSED

Here is a first example with an object that returns the text when toString() function is called (first solution):

//...
class Country{
  String name;
  int id;
  Country(this.name,this.id);
  toString(){
    return(name);
  }
}
//...
class _MyAppState extends State<MyApp> {
static final String countriesJson = '[{"id":0,"name":"Afghanistan"},{"id":1,"name":"Albania"},{"id":2,"name":"Algeria"},{"id":3,"name":"Angola"}]';
List<Country> countries;
List<DropdownMenuItem<Country>> countriesDropdownItems;
Country selectedCountry;

  @override
  void initState() {
    countries=(jsonDecode(countriesJson) as List<dynamic>).map<Country>((e) => Country(e['name'],e['id'])).toList();
    countriesDropdownItems = countries.map<DropdownMenuItem<Country>>((e) => DropdownMenuItem(child:Text(e.name),value:e,)).toList();
    super.initState();
}

  @override
  Widget build(BuildContext context) {
    return(
    //...
    SearchableDropdown.single(
        items: countriesDropdownItems,
        value: selectedCountry,
        hint: "Select one country",
        searchHint: "Select one country",
        onChanged: (value) {
          setState(() {
            selectedCountry = value;
          });
        },
        isExpanded: true,
      )
    //...
    );
  }
}

If I try to adapt this to your example, it gives me the following:

//...
class Country{
  String name;
  int id;
  Country(this.name,this.id);
  toString(){
    return(name);
  }
}
//...
List<DropdownMenuItem<Country>> countriesDropdownItems;
Country selectedCountry;
 Future<String> getSWData() async {
    var res = await http .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);
List<Country> countries=(resBody as List<dynamic>).map<Country>((e) => Country(e['name'],e['id'])).toList();
    setState(() {
      data = resBody;//I don't think this is necessary anymore at least for the searchable_dropdown
    countriesDropdownItems = countries.map<DropdownMenuItem<Country>>((e) => DropdownMenuItem(child:Text(e.name),value:e,)).toList();
    });

    return "Sucess";
  }

//and here is my dropdown 

 children: <Widget>[
             SearchableDropdown.single(
             hint:Text("Select Country"),
              isExpanded: true,
          items: countriesDropdownItems,
          onChanged: (newVal) {
            setState(() {
              selectedCountry = newVal;
              _countryname = newVal.name;
              city.clear();
              _myState=null;
              this.getCity(int.parse(_countryname));
            });
          },
          value:selectedCountry,
        ),
         ],

Please let me know if you need another example with the second solution (searchFn).

from searchable_dropdown.

Hi @atta1234 ,

For the API part of your question, I'm not sure whether this is a similar request to #44 . Maybe not.

However, looking at your code, for the search to work, you would need to put either the text or an object which toStringfunction returns the text in the value argument of the DropdownMenuItem:

            return  DropdownMenuItem(
              child:  Text(item['name']),
              value: item['name'],
            );

from searchable_dropdown.

Hi @atta1234 ,

No worries. I understand.

Give me some time to prepare some examples for you.

from searchable_dropdown.

I was tempted to give you the same example with less lines of code but it would have made it less understandable.

Building a list of dropdown menu items in the build function - while you may find it more elegant and I understand it - makes the conversion run more often than needed and is in fact less efficient. Also, my personal experience showed me a more stable behavior with the list of dropdown menu items defined outside the build function.

Now, if you really prefer using the data variable the way it was in your original example, it is possible through the use of the searchFn argument. Are you sure you don't want an example based on this?

from searchable_dropdown.

Sorry you reached this conclusion. I hope you'll have all desired success with vue native.

from searchable_dropdown.

Thanks implented on given solutions to make "toString to my Class" worked. i tried searchFn before, but more than efficient and elegant toString.

Thanks for great plugins @lcuis.
@atta1234 let me know if you still have problems.

from searchable_dropdown.

Hi @atta1234 ,

For the API part of your question, I'm not sure whether this is a similar request to #44 . Maybe not.

However, looking at your code, for the search to work, you would need to put either the text or an object which toStringfunction returns the text in the value argument of the DropdownMenuItem:

            return  DropdownMenuItem(
              child:  Text(item['name']),
              value: item['name'],
            );

Great that's worked but what about id i need id of that data in value i want to pass t to other function

from searchable_dropdown.

Indeed, it is more practical, reliable and efficient to get the id than retrieve it afterwards from the texts list.

To solve this elegantly, I see two main possibilities:

1. do so that your items are made of objects with item.id being the id (for example) and item.toString() to return the text.
2. handle the search through searchFn function that you would give as an argument. searchFn could try to match the keyword against the text corresponding to the received id.

Feel free to ask for more explanation if needed.

from searchable_dropdown.

i m completely new to flutter and your help will much appreciated in this matter, as you said
to make the value string and i did that and now the search working,
return DropdownMenuItem(
child: Text(item['name']),
value: item['name'].toString(),
);

      }).toList(),
      onChanged: (newVal) {
        setState(() {
          _countryname = newVal;      
          print(newVal);       
        });
      },
      value:_countryname,

but somehow i don't know how i will get the id now i really need that id to pass to the city function to get related city,,you said above but i did not got that

from searchable_dropdown.

is this model class is necessary class Country{
String name;
int id;
Country(this.name,this.id);
toString(){
return(name);
}
}

i just don't want to make my code rush

from searchable_dropdown.

you have added to much List<DropdownMenuItem> lis list ,, my code was straight forward and understandable

from searchable_dropdown.

can' we get the id in set state or something session etc

from searchable_dropdown.

the above code will work for default country drop down but will become more complex for state and city as i m get state after the value change

from searchable_dropdown.

In object oriented programming, having a class to model a business entity such as a country is rarely considered as having rush code IMHO.

My intention was not to make the code less understandable but keep it both efficient and understandable.

As long as you can access the selectedCountry object, you can access the selectedCountry id:

print("selected country id: ${selectedCountry.id}");

In order to avoid getting a null exception when no country is selected, you could do it this way:

print("selected country id: ${selectedCountry?.id??'none selected'}");

I understand that you need the same to be applied for state and city. I also understand that the list of states will need to change when the selected country changes and that the list of cities will change as soon as another state is selected. Is there something that makes you think there could be an issue with this?

Would you like me to try and prepare a searchFn based example and see if you like it better?

from searchable_dropdown.

ok thanks i will try to implement it,yes you are right but have tried that model class before and the snapshot etc in dropdown was a pain,
i just have this List data = List(); //line
and after jsondecode i assign data to this list,,,so i m free from that map string etc thing,,,, same for city on change i just assign the values to city and that's working with very less code

from searchable_dropdown.

ok thanks sir you have already help a lot ,God bless you!

from searchable_dropdown.

I'm glad if that helped! I wish you the best!

Closing for now. Feel free to reopen if needed.

from 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:searchable_dropdown/searchable_dropdown.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<DropdownMenuItem<Country>> countriesDropdownItems;
Country selectedCountry;
 Future<String> getSWData() async {
    var res = await http .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);
List<Country> countries=(resBody as List<dynamic>).map<Country>((e) => Country(e['name'],e['id'])).toList();
    setState(() {
    countriesDropdownItems = countries.map<DropdownMenuItem<Country>>((e) => DropdownMenuItem(child:Text(e.name),value:e,)).toList();
    });

    return "Sucess";
  }

    @override
  void initState() {
    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>[
             SearchableDropdown.single(
             hint:Text("Select Country"),
              isExpanded: true,
          items: countriesDropdownItems,
          onChanged: (newVal) {
            setState(() {
              selectedCountry = newVal;
              selectedCountry = newVal.name;
            
            });
          },
          value:selectedCountry,
        ),
         ],

        ),  
      


        
      ),
    );
  
  }
}


`

i m getting this error EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (14412): The following assertion was thrown building MyHomePage(dirty, state: _MyHomePageState#9dafd):
I/flutter (14412): 'package:searchable_dropdown/searchable_dropdown.dart': Failed assertion: line 313 pos 16: 'items !=
I/flutter (14412): null': is not true.

from searchable_dropdown.

_TypeError (type 'String' is not a subtype of type 'int') for this line as well

List countries=(resBody as List).map((e) => Country(e['name'],e['id'])).toList();

that's why i was using that few line of code

from searchable_dropdown.

Hello @atta1234 ,

I'm not sure whether you are saying that you still have an issue or whether you solved your issue in your last comment. Can you please clarify?

from searchable_dropdown.

Leave sir i am going to for vue native this is just basic issue and spend whole day for it so i m sure flutter will has more issue ahead in more advance topic ,so better to not waste more time int it

from searchable_dropdown.

Thanks implented on given solutions to make "toString to my Class" worked. i tried searchFn before, but more than efficient and elegant toString.

Thanks for great plugins @lcuis.
@atta1234 let me know if you still have problems.

i have problem with index value 0 or 1 ,,i have used , other plugin by the way are you implementing country state city dropdown?

from searchable_dropdown.

@atta1234 what are you asking is still this plugins ? or another plugins which is country state ?
if so i can't answer your question, this related to searchable plugins.
If still this plugins, read through your comment before, please add your returned data to model class first as @lcuis suggested, after this then let me know your code if there still any problems.
also i thought if you follow this #49 (comment) was clear and should solve your problems

from searchable_dropdown.

To reply on the title of this issue:

Since version 2.0.4 and later, the SearchChoices plugin supports pagination and Future/network/API/webservice calls.
The example is meant to work with PHP-CRUD-API based webservice using a non-web Flutter client. However, the example can be adapted for many other situations.
https://github.com/lcuis/search_choices#single-dialog-paged-future

from searchable_dropdown.