Closed atta1234 closed 4 years ago
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 toString
function returns the text in the value
argument of the DropdownMenuItem
:
return DropdownMenuItem(
child: Text(item['name']),
value: item['name'],
);
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
toString
function returns the text in thevalue
argument of theDropdownMenuItem
: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
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.
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
Hi @atta1234 ,
No worries. I understand.
Give me some time to prepare some examples for you.
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
).
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
you have added to much List<DropdownMenuItem
can' we get the id in set state or something session etc
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
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?
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
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?
ok thanks sir you have already help a lot ,God bless you!
I'm glad if that helped! I wish you the best!
Closing for now. Feel free to reopen if needed.
`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.
_TypeError (type 'String' is not a subtype of type 'int') for this line as well
List
that's why i was using that few line of code
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?
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
Sorry you reached this conclusion. I hope you'll have all desired success with vue native.
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.
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?
@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 https://github.com/icemanbsi/searchable_dropdown/issues/49#issuecomment-616469685 was clear and should solve your problems
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
here is my data list from api
and here is my dropdown
it's load data from api but when i search i m not getting search data is there is any extra step for search? the package should be dynamic like jquery select2