Good Day. Am a beginner in flutter and here's what am trying to achieve.
Am creating a form where users can edit payout account details. Account Name is a text field, Account Number is a Text Field, i want Bank Name to be a drop down because i'm using bulk payment system, so the bank name would need to match the slug or else it'll show invalid on my payment merchant.
Here's the code for the form if all fields are just text fields..
labelText:"Bank Name".i18n,
keyboardType:TextInputType.multiline,
textEditingController: vm.instructionsTEC,
).py12(),```
I TRIED REPLACING IT WITH THIS
DropdownButton<String>(
items: <String>['abbey-mortgage-bank',
'above-only-mfb',
'access-bank',
'access-bank-diamond',
'alat-by-wema',
'amju-unique-mfb',
'asosavings',
'bainescredit-mfb',
'bowen-microfinance-bank',
'carbon',
'cemcs-microfinance-bank',
'citibank-nigeria',
'coronation-merchant-bank',
'ecobank-nigeria',
'ekondo-microfinance-bank',
'eyowo',
'fidelity-bank',
'firmus-mfb',
'first-bank-of-nigeria',
'first-city-monument-bank',
'fsdh-merchant-bank-limited',
'globus-bank',
'gomoney',
'guaranty-trust-bank',
'hackman-microfinance-bank',
'hasal-microfinance-bank',
'heritage-bank',
'ibile-mfb',
'infinity-mfb',
'jaiz-bank',
'kadpoly-mfb',
'keystone-bank',
'kredi-money-mfb',
'kuda-bank',
'lbic-plc',
'links-mfb',
'mayfair-mfb',
'mint-mfb',
'paga',
'palmpay',
'parallex-bank',
'parkway-ready-cash',
'paycom',
'petra-microfinance-bank-plc',
'polaris-bank',
'providus-bank',
'quickfund-mfb',
'rand-merchant-bank',
'rubies-mfb',
'sparkle-microfinance-bank',
'stanbic-ibtc-bank',
'standard-chartered-bank',
'sterling-bank',
'suntrust-bank',
'taj-bank',
'tangerine-money',
'tcf-mfb',
'titan-bank',
'union-bank-of-nigeria',
'united-bank-for-africa',
'unity-bank',
'vfd',
'wema-bank',
'zenith-bank'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (_) {},
).py12(),
I ran the APK it just shows a blank screen when this page Is loaded.
Use DropDownSearch() widget for that as below.
Add following dependency in your pubspec.yml :
dropdown_search: ^0.6.3
And click on pub get
Import the class-
import 'package:dropdown_search/dropdown_search.dart';
Then use the following code :
DropdownSearch<String>(
//mode of dropdown
mode: Mode.DIALOG,
//to show search box
showSearchBox: true,
showSelectedItem: true,
//list of dropdown items
items: [
"India",
"USA",
"Brazil",
"Canada",
"Australia",
"Singapore"
],
label: "Country",
onChanged: print,
//show selected item
selectedItem: "India",
),
Fore more details you can see here
Related
I'm fetching the customer name record from firebase and displaying it inside the dropdown button as a menu items which I did it succesfully but along with that, I'm trying to add a one extra dropdown menu item called 'add a new customer', so basically I'm trying to figure out that how to display one more menu item along with firebase fetched items
here is my code
DropdownButton<CustomerModel>(
hint: Text('SELECT CUSTOMER', style: GoogleFonts.oswald()),
value: customerModel,
items: snapshot.data!.docs.map((e){
CustomerModel customerModel = CustomerModel(customerId: e['customerId'], customerDocumentId: e.id, customerName: e['name'], customerMobile: e['mobile'], customerCity: e['city'], customerAddress: e['address'], createdOn: e['createdOn'].toDate());
return DropdownMenuItem(value: customerModel, child: Text(customerModel.customerName.toString().toUpperCase(), style: GoogleFonts.oswald(color: Colors.black54)));
}).toList(), // displaying all customer names from firebase, I want to have one more extra menu item called 'ADD A NEW CUSTOMER'
onChanged: (value){
setState(() {
customerModel = value;
customerId = value!.customerId;
customerDocumentId = value.customerDocumentId;
customerName = value.customerName;
});
},
),
You can do
items: [
...snapshot.data!.docs.map((e){......).toList(),
DropdownMenuItem(..yourNewItem..),
],
I am having a multiple FormBuilder dropdown in my flutter app. all of them are dependent dropdown.
i want to implement something like this:
the first of the main parent dropdown value should be auto fill and hence all other are filled or selected depending on the parents selection.
I can see the text filled in all the dropdown but as it is the dependent it is disabled for first dropdown to be clicked once.
How to fix this issue?
in the below screenshot we can see that the data is filled or been selected in every dropdown but second dropdown is still been disabled. it only gets enabled after clicking or selecting the value in first dropdown. enter image description here
Here is my code for first dropdown
padding: const EdgeInsets.all(12.0),
child: FormBuilderDropdown(
name: 'City',
decoration: InputDecoration(
labelText: 'City',
),
allowClear: true,
hint: Text(widget.callLocationModel.CityName),
initialValue: citySelected,
validator: FormBuilderValidators.compose(
[FormBuilderValidators.required(context)]),
items: cityList
.map((citySelected) => DropdownMenuItem(
value: cityChoosen,
child:new Text('$citySelected'),
))
.toList(),
onChanged: (String value){
setState(() {
citySelected= value;
//this fuction calls my second dropdown depending on first dropdown value selection
fetchSite(citySelected);
});
},
),
),
I assume all this layout is done in a stageful widget, which has a variable in it’s state for each selected value (when it’s selected). You may override initState member function and set the initial values there, so when the widget is built for the first time it will have those values preselected.
Let's say we want to pass an ID on form submission but we don't want the users to see it, on flutter_form_builder: ^7.1.1 there is no option to hide fields, any workaround?
I just found out that flutter_form_builder: ^7.1.1 offers to build your own custom field, so if we want to make a hidden field, we just return a SizedBox.shrink() on builder and set the initial value on FormBuilderField.Heres a sample code.
Widget taskIDField() {
return FormBuilderField(
name: "task_id",
enabled: false,
initialValue: widget.task?.id.toString(),
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context),
]),
builder: (FormFieldState<dynamic> field) {
//Empty widget
return const SizedBox.shrink();
},
);
}
I am using the flutter pref library to create a settings page. The PrefChoice is used to show a drop down for language selection. The drop down shows the values properly. Issue is when we select anything from the drop down, the onChange method does not get called for some reason. Due to this we are not able to take action on the change in choice. Is there anything I am missing here?
PrefChoice<String>(
title: Text(AppLocalization.of(context, 'settings.language')),
pref: 'language_key',
items: const [
DropdownMenuItem(
value: LocaleConstants.LC_ENGLISH,
child: Text(LocaleConstants.ENGLISH)),
DropdownMenuItem(
value: LocaleConstants.LC_GERMAN,
child: Text(LocaleConstants.GERMAN))
],
onChange: (value) {
// This never gets called
log.d('Locale changed to - $value');
},
),
For example, in a TextField it is possible to set an InputDecoration with a label text, that shows in the center of the TextField when there is no user input, and then shows above the user's input text afterward.
With a DropDownButton I can only seem to get the hint text to display before the user makes a selection, and then it disappears and only displays the user's selection. Is there a way to mimic the TextField's behavior?
Thanks!
You can achieve that using DropDownButtonFormField widget instead of DropDownButton. DropDownButtonFormField has decoration property which lets you use labelText which goes over the top of the field after selecting an item from the list. Sample working code below:
return DropdownButtonFormField<String>(
decoration: InputDecoration(
labelText: 'select option'
),
value: selected,
items: ["A", "B", "C"]
.map((label) => DropdownMenuItem(
child: Text(label),
value: label,
))
.toList(),
onChanged: (value) {
setState(() => selected = value);
},
);
Output:
Hope this answers your question.