Блог

Главная - Вопросы по программированию - Как реализовать выпадающий список в Flutter

Как реализовать выпадающий список в Flutter

#flutter #dart #drop-down-menu

#flutter #dart #выпадающее меню

Вопрос:

Добрый день. Я новичок в flutter, и вот чего я пытаюсь достичь.

Я создаю форму, в которой пользователи могут редактировать данные учетной записи для выплат. Имя учетной записи — это текстовое поле, номер счета — текстовое поле, я хочу, чтобы название банка было выпадающим списком, потому что я использую систему массовых платежей, поэтому название банка должно соответствовать пуле, иначе оно будет отображаться недействительным в моем платежном центре.

Вот код для формы, если все поля являются просто текстовыми полями..

 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, он просто показывает пустой экран при загрузке этой страницы.

Ответ №1:

Для этого используйте виджет DropDownSearch(), как показано ниже. Добавьте следующую зависимость в свой pubspec.yml :

 dropdown_search: ^0.6.3

И нажмите на pub get

Импортируйте класс-

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

Более подробную информацию вы можете увидеть здесь

Метки: