CODEWITHSUNDEEP
flutterdartdrop-down-menu
Treasure Uvietobore
Treasure Uvietobore

Reputation: 131

How to implement Drop Down List in Flutter

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.

Upvotes: 0

Views: 424

Answers (1)

Rakesh Saini
Rakesh Saini

Reputation: 763

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

Upvotes: 1

Related Questions