Comments (24)
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 toString
function 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
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
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:
- do so that your items are made of objects with
item.id
being the id (for example) anditem.toString()
to return the text. - 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.
Related Issues (20)
- Selcted value is not changes if I give preselected value HOT 6
- Search is not working when i use value as Id inside onChanged
- How to get the selected value not index in multiple?
- Search is not working when, I use value as Id Int inside Value DropdownMenuItem HOT 1
- Provide async call to API on typing search HOT 1
- null safety HOT 1
- Clear the selected value programatically
- Is it possible to reduce the popup size like height , width after dropdown is opened HOT 1
- selectedItems how to get values in string instead of id in numbers HOT 1
- When dropdown is clicked, UI should not get expanded, the items should display like normal dropdown effect HOT 1
- By default selected initial value HOT 1
- Add the ability to put hints in dialog search
- Need support for search delay (debounce) HOT 4
- Remove default padding HOT 2
- In multiple select option is not working properly
- Failed to build iOS app
- Compilation failed Flutter 2.5.0 HOT 7
- The getter 'subhead' isn't defined for the class 'TextTheme' - Cannot Debug/Run Flutter App HOT 13
- Can you update library to version 2 with null safty? HOT 1
- error HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from searchable_dropdown.