I have a question regarding this library https://pub.dev/packages/dropdown_search. I am trying to implement dropdown with searchbox, whenever I type in any value it doesn't show in the box and nothing is being returned in dropdown. How can I set this up properly?
DropdownSearch(
mode: Mode.MENU,
dropdownSearchDecoration: InputDecoration(
fillColor: Colors.white,
filled: true,
border: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF01689A)),
),
),
showAsSuffixIcons: true,
showClearButton: true,
items: _countryList.map((Country item) {
return item.label;
}).toList()
),
It is because of searchDelay field. When you make it 0 seconds it will work properly and become instant search.
DropdownSearch<String>(
searchDelay: Duration(milliseconds: 0),
showSearchBox: true,
showClearButton: true,
mode: Mode.MENU,
showSelectedItems: true,
items: transactionState.drop,
label: "Cari Hesap",
hint: "Cari Hesap Girin",
selectedItem: transactionState.selecteditem,
//popupItemDisabled: (String s) => s.startsWith('I'),
onChanged: (str){
transactionState.getBakiye(str!);
transactionState.selecteditem = str;
},
),
Related
My application contains localizations (translation "en","ar"), in my translation JSON files there are cities that users will choose while registration process these cities appears in a DropDownButtonFormField widget as follows:
final provincesField = DropdownButtonFormField<String>(
value: dropDownValue,
onChanged: (String? newValue) {
setState(() {
dropDownValue = newValue!;
});
},
items: provinces.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: SizedBox(
width: 100.0,
child: Text(value, textAlign: TextAlign.center),
));
}).toList(),
elevation: 4,
decoration: InputDecoration(
prefixIcon: Icon(Icons.flag_circle),
labelText: AppLocalizations.of(context)!.chooseProvinence,
alignLabelWithHint: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
);
the cities are declared in this list:
List<String> provinces = [
'عمان',
'إربد',
'الزرقاء',
'المفرق',
'الطفيلة',
'عجلون',
'معان',
'الكرك',
'مادبا',
'العقبة',
'البلقاء',
'جرش'
];
String dropDownValue = 'عمان';
what am trying to achieve is that cities will appear to user based on the app language. I have tried to use AppLocalizations.of(context)!.city inside of the list but its not working so i believe there is some way to declare the list values based on localization, ill appreciate any help
Suppose below localizations data is your cities list
English:
"Dhaka" : "Dhaka",
"Chittagong" : "Chittagong",
"Cumilla" : "Cumilla",
"Rajshahi" : "Rajshahi",
"Bhola" : "Bhola",
Arabic:
"Dhaka" : "دكا",
"Chittagong" : "شيتاغونغ",
"Cumilla" : "كوميلا",
"Rajshahi" : "راجشاهي",
"Bhola" : "بولا",
initialize your the localization keys of your cities and dropDownValue
List<String> provinces = [
"Dhaka",
"Chittagong",
"Cumilla",
"Rajshahi",
"Bhola",
];
String dropDownValue = 'Dhaka';
here is the widget. I used getx localization. So I used 'tr' after the child text of DropdownMenuItem. I hope it's can help u.
Widget TestWidget() {
return DropdownButtonFormField<String>(
value: dropDownValue,
onChanged: (String? newValue) {
// To print the value with localization
print(newValue!.tr);
},
items: provinces.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(value: value, child: Text(value.tr));
}).toList(),
elevation: 4,
decoration: InputDecoration(
prefixIcon: Icon(Icons.flag_circle),
labelText: 'Select',
alignLabelWithHint: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
);
}
If you need to store the city in database or anywhere with localization then you can use it like [dropDownValue.tr]
I'm using firebase real-time database and I have a form where the user adds the information to the database using it, but I'm stuck with the DropdownButtonFormField, how can I store the value in my database when the form button is pressed?
I used to use the controller when it was TextFormField, but now, I don't know what to do
DropdownButtonFormField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(20.0)),
borderSide:
BorderSide(width: 2, color: appColor),
),
labelText: 'Location',
labelStyle: TextStyle(
fontSize: 20, color: Colors.black)),
isExpanded: true,
// Initial Value
value: selectedLocation,
icon: const Icon(
Icons.keyboard_arrow_down,
color: appColor,
),
// Array list of items
items: Locations.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
// After selecting the desired option,it will
// change button value to selected value
onChanged: (String? newLocation) {
setState(() {
selectedLocation = newLocation!;
});
},
),
you get the selectedLocation value and pass that to firebase method. print selectedLocation in the onChange method then when ever you click item in dropdown, the selectedLocation will change.
DatabaseReference ref = FirebaseDatabase.instance.ref("users/123");
await ref.set({
"selectedLocation": selectedLocation ,
});
How can we get htmltoolbar and htmlEditor separate background color
My work
Expectation:
htmlToolbarOptions: HtmlToolbarOptions(
dropdownFocusColor: borderColor,
dropdownBoxDecoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(8.0)),
),
buttonFillColor: yellowColor,
renderBorder: true,
toolbarType: ToolbarType.nativeExpandable,
textStyle: const TextStyle(color:Color(0xff344054),),
initiallyExpanded: false,
),
htmlEditorOptions: HtmlEditorOptions(
shouldEnsureVisible: true,
initialText: data.taskStatus,
hint: S.current.task_description,
spellCheck: true,
autoAdjustHeight: true,
adjustHeightForKeyboard: false,
),
otherOptions: const OtherOptions(height: 1500),
);
I want an up to date example on how to add autofill addresses in flutter. I have looked at every resource I can and some people over complicate the heck out of it,or just copy and paste different messy code.
Atm I have a Google search that just shows a blue line as if Its waiting and gets no response.
TextFormField(
controller: addressController,
onTap: () async {
Prediction p = PlacesAutocomplete.show(
context: context,
apiKey: "MY_API_KEY_SECRET_SHHHHHH",
mode: Mode.fullscreen,
language: "En",
components: [new Component(Component.country, "NZ")])
as Prediction;
displayPrediction(p);
},
validator: (value) {
if (value == null || value.isEmpty) {
return "Customer must have address! cannot be blank";
}
},
decoration: InputDecoration(
hintText: "Enter Customer Address",
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.map),
),
),
and I also have displayPrediction
Future<Null> displayPrediction(Prediction p) async {
GoogleMapsPlaces _places = GoogleMapsPlaces(
apiKey: "API_KEY",
apiHeaders: await GoogleApiHeaders().getHeaders(),
);
PlacesDetailsResponse detail =
await _places.getDetailsByPlaceId(p.placeId.toString());
final lat = detail.result.geometry!.location.lat;
final lng = detail.result.geometry!.location.lng;
}
Broken Search Example
So my problem was solved within the Prediction method. here is how I solved it with help from other resources.
Prediction? p = await PlacesAutocomplete.show(
context: context,
apiKey: kGoogleApiKey,
radius: 10000000,
types: [],
strictbounds: false,
mode: Mode.overlay,
decoration: InputDecoration(
hintText: 'Search',
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide(
color: Colors.white,
),
),
),
components: [Component(Component.country, "nz")],
);
I am using getx obs with fluter and the below is json response.
[{"id":1,"designation":"Deputy General Manager"},{"id":2,"designation":"Executive Director, Technical Operations","designation_short_code":"ED, TO"},{"id":3,"designation":"Manager","designation_short_code":"M"},{"id":4,"designation":"Sr. Manager","designation_short_code":"Sr. M"}]
In controller I am using--
var listData = List<dynamic>.empty(growable: true).obs;
var designation = 1.obs;
void setDesignation(int value) {
designation.value = value;
}
I am getting the above json response based on api call under listData.
In UI I am using the below code..
Obx(() => DropdownButtonFormField<dynamic>(
decoration: InputDecoration(
hintText: 'Designation',
labelText: 'Select Designation',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
filled: true,
fillColor: Colors.white,
errorStyle: TextStyle(color: Colors.yellow),
),
hint: Text(
'Select Designation',
),
onChanged: (selectedValue) {
designation_controller
.setDesignation(selectedValue);
},
value:
designation_controller.designation.value.toInt(),
items: designation_controller.listData.map((map) {
return DropdownMenuItem(
child: Text(map['designation']),
value: map['id'],
);
}).toList(),
)),
My problem is whenever I select designation it is not updating though my api end point is hitting with 200 response.
Can anyone help me please.
Thanks in advnace.
I have fixed problem. My problem was in the below code
updateData(
controller.userData[0]['id'],
controller.designationEdittingTextController.text
)
I have changed controller.designationEdittingTextController.text to controller.designationEdit.value as below
updateData(
controller.userData[0]['id'],
controller.designationEdit.value
)
Thanks