How to set dropdown selected item into TextFormField in Flutter - 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(),
),
),
);
},
),
),

Answer 1

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.

Answer 2

One way would be to use a TextEditingController and assign is to your TextField with controller: textEditingController for example
final textEditingController = TextEditingController();