How to set dropdown selected item into TextFormField in Flutter

Question

I created dropdown in TextFormField in flutter, i successfully loaded list (bankDataList) into dropdown which is dynamic list. Data is showing into dropdown list. But i have a problem to assign "value : _bankChoose" into DropDownButton , it is not updating into TextFormField. I am using icon and text, please see screenshot.

  String _bankChoose;

   List<BankListDataModel> bankDataList;

      Container(
                  margin: EdgeInsets.only(left: 15, top: 10, right: 15),
                    child: FormField<String>(
                      builder: (FormFieldState<String> state) {
                        return InputDecorator(
                          decoration: InputDecoration(
                              contentPadding:
                                  EdgeInsets.fromLTRB(12, 10, 20, 20),
                              // labelText: "hi",
                              // labelStyle: textStyle,
                              // labelText: _dropdownValue == null
                              //     ? 'Where are you from'
                              //     : 'From',
                              errorText: _errorBank,
                              errorStyle: TextStyle(
                                  color: Colors.redAccent, fontSize: 16.0),
                              border: OutlineInputBorder(
                                  borderRadius:
                                      BorderRadius.circular(10.0))),
                          child: DropdownButtonHideUnderline(
                            child: DropdownButton<BankListDataModel>(
                              style: TextStyle(
                                fontSize: 16,
                                color: text_gray_color,
                                fontFamily: "verdana_regular",
                              ),
                              hint: Text(
                                "Select Bank",
                                style: TextStyle(
                                  color: text_gray_color,
                                  fontSize: 16,
                                  fontFamily: "verdana_regular",
                                ),
                              ),
                              value: _bankChoose,
                              isExpanded: true,
                              isDense: true,
                              onChanged: (BankListDataModel newValue) {
                                setState(() {
                                  _bankChoose = newValue.bank_name;
                                });
                              },
                              items: bankDataList
                                  .map<DropdownMenuItem<BankListDataModel>>(
                                      (BankListDataModel valueItem) {
                                return DropdownMenuItem(
                                  value: valueItem,
                                  child: Row(
                                    // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      new CircleAvatar(
                                        backgroundImage: new NetworkImage(
                                            valueItem.bank_logo),
                                      ),
                                      // Icon(valueItem.bank_logo),
                                      SizedBox(
                                        width: 15,
                                      ),
                                      Text(valueItem.bank_name),
                                    ],
                                  ),
                                );
                              }).toList(),
                            ),
                          ),
                        );
                      },
                    ),
                  ),

Solution

You want to choose drop down item of type BankListDataModel, then your _bankChoose variable should be of type BankListDataModel.

Try this one,

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //String _bankChoose;
  BankListDataModel _bankChoose;


  List<BankListDataModel> bankDataList=[
    BankListDataModel("SBI","https://www.kindpng.com/picc/m/83-837808_sbi-logo-state-bank-of-india-group-png.png"),
    BankListDataModel("HDFC","https://www.pngix.com/pngfile/big/12-123534_download-hdfc-bank-hd-png-download.png"),
    BankListDataModel("ICICI","https://www.searchpng.com/wp-content/uploads/2019/01/ICICI-Bank-PNG-Icon-715x715.png"),
    //BankListDataModel("Canara","https://bankforms.org/wp-content/uploads/2019/10/Canara-Bank.png")
  ];
  @override
  void initState() {
    super.initState();
    _bankChoose = bankDataList[0];
  }
  void _onDropDownItemSelected(BankListDataModel newSelectedBank) {
    setState(() {
      _bankChoose = newSelectedBank;
    });
  }
  @override
  Widget build(BuildContext context) {

    return
      Scaffold(
        body: Form(
          child: Center(
            child: Container(
              margin: EdgeInsets.only(left: 15, top: 10, right: 15),
              child: FormField<String>(
                builder: (FormFieldState<String> state) {
                  return InputDecorator(
                    decoration: InputDecoration(
                        contentPadding:
                        EdgeInsets.fromLTRB(12, 10, 20, 20),
                        // labelText: "hi",
                        // labelStyle: textStyle,
                        // labelText: _dropdownValue == null
                        //     ? 'Where are you from'
                        //     : 'From',
                        errorText: "Wrong Choice",
                        errorStyle: TextStyle(
                            color: Colors.redAccent, fontSize: 16.0),
                        border: OutlineInputBorder(
                            borderRadius:
                            BorderRadius.circular(10.0))),
                    child: DropdownButtonHideUnderline(
                      child: DropdownButton<BankListDataModel>(

                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.grey,
                          fontFamily: "verdana_regular",
                        ),
                        hint: Text(
                          "Select Bank",
                          style: TextStyle(
                            color: Colors.grey,
                            fontSize: 16,
                            fontFamily: "verdana_regular",
                          ),
                        ),
                        items: bankDataList
                            .map<DropdownMenuItem<BankListDataModel>>(
                                (BankListDataModel value) {
                              return DropdownMenuItem(
                                value: value,
                                child: Row(
                                  // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    new CircleAvatar(
                                      backgroundImage: new NetworkImage(
                                          value.bank_logo),
                                    ),
                                    // Icon(valueItem.bank_logo),
                                    SizedBox(
                                      width: 15,
                                    ),
                                    Text(value.bank_name),
                                  ],
                                ),
                              );
                            }).toList(),

                        isExpanded: true,
                        isDense: true,
                        onChanged: (BankListDataModel newSelectedBank) {
                          _onDropDownItemSelected(newSelectedBank);
                        },
                        value: _bankChoose,

                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      );
  }
}

class BankListDataModel{
  String bank_name;
  String bank_logo;
  BankListDataModel(this.bank_name,this.bank_logo);
}

sorry for formatting of images.

Comments

[Tirth Patel]

Does this answer your question? flutter dropdown Failes when class is used as value instead of String

[Rakesh Saini]

I am getting bank name on Button click but when i select bank from dropdown it is not showing in textformfield.

[Rakesh Saini]

Really big Thank you @Yogita Kumar, i got right solution from your answer. You saved my time. Thank You so much.