如何在Flutter中实现下拉列表

Question

美好的一天。我是 flutter 的初学者，这就是我要实现的目标。

正在创建一个表单，用户可以在其中编辑付款帐户详细信息。帐户名称是一个文本字段，帐号是一个文本字段，我希望银行名称是一个下拉列表，因为我使用的是批量支付系统，所以银行名称需要与 slug 匹配，否则它会显示无效我的支付商户。

如果所有字段都是文本字段，则这是表单的代码..

labelText:"Bank Name".i18n,
keyboardType:TextInputType.multiline,
  textEditingController: vm.instructionsTEC,
 ).py12(),```

我试过用这个替换它

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(),

我运行 APK 在加载此页面时只显示空白屏幕。

Answer 1

为此使用 DropDownSearch() 小部件，如下所示。在 pubspec.yml 中添加以下依赖项：

dropdown_search: ^0.6.3

然后点击 pub get

导入 class-

import 'package:dropdown_search/dropdown_search.dart';

然后使用下面的代码：

      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",
      ),

更多详情可以看here

如何在Flutter中实现下拉列表

How to implement Drop Down List in Flutter

dart

drop-down-menu

flutter