-1

I am new in flutter, I want to create a searchable dropdown in Textformfield in flutter. Like below-

I want to show icons in left side and text to the right as shown in image. When i click on any suggest item it should be go inside textformfield. Data will be loaded from server. I will receive icons and text in json format from server api call. Please provide me any solution to achieve that.

enter image description here

 Container(
              child: SearchableDropdown(
                value: _bankChoose,
                isCaseSensitiveSearch: true,
                items: bankDataList != null
                    ? bankDataList.map<
                    DropdownMenuItem<
                        BankListDataModel>>(
                        (BankListDataModel value) {
                      return DropdownMenuItem(
                        value: value,
                        child: Row(
                          // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            new CircleAvatar(
                              backgroundImage:
                              new NetworkImage(
                                  value.bank_logo),
                              backgroundColor: Colors.white,
                              radius: 12,
                            ),
                            // Icon(valueItem.bank_logo),
                            SizedBox(
                              width: 15,
                            ),
                            Text(value.bank_name, style: TextStyle(fontSize: 14, fontFamily: "verdana_regular",
                                color: text_gray_color, fontWeight: FontWeight.w500),),
                          ],
                        ),
                      );
                    }).toList()
                    : null,

                isExpanded: true,
                hint: "Select one",
                searchHint: "Select one",
                onChanged: (BankListDataModel newSelectedBank) {
                  setState(() {
                    _onDropDownItemSelected(newSelectedBank);
                    print("selected Bank name " + _bankChoose.bank_name);
                  });
                },

              ),
            ),
Rakesh Saini
  • 660
  • 2
  • 7
  • 20
  • check this on pub https://pub.dev/packages/simple_autocomplete_formfield – Md. Yeasin Sheikh Aug 04 '21 at 09:08
  • What is the problem you're facing? have you tried to implement this? it should be quite straight forward with a Dialog, ListView and TextField. – Rohan Thacker Aug 04 '21 at 09:09
  • @YeasinSheikh, simple_autocomplete_formfield working fine. When when i press in textformfield the suggestion list create space , so the next formfield dragged below. It should be like dialog box. How to do that? – Rakesh Saini Aug 04 '21 at 09:47
  • check this https://github.com/yeasin50/BasicBankSystem/blob/dcbd65956b7fc390f49e5e5365738b31cf3cc4df/lib/screens/moneyTransferScreen.dart#L94-L131 – Md. Yeasin Sheikh Aug 04 '21 at 13:11

1 Answers1

0

you can use this package to achieve what you are trying to do enter link description here

Gbenga B Ayannuga
  • 2,407
  • 3
  • 17
  • 38