Nesting ListView into DropdownMenu - flutter

Question

I have created a custom ListView and I want to nest it into my Dropdownmenu as the item. Currently, I am getting the 'NoSuchMethodError : The method 'map' was called on null'. I can't seem to map it right. I am very new to Flutter.
The code for the ListView
class TheDetails extends StatelessWidget {
TheDetails({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8.0),
itemExtent: 70.0,
children: <CustomListItem>[
CustomListItem(
accName: 'Salary Account',
accNumber: 'Savings XXX-X-XX563-9',
accBalance: '56,302.56',
),
CustomListItem(
accName: 'Salary Account 2',
accNumber: 'Savings XXX-X-XX563-9',
accBalance: '89,302.56',
),
CustomListItem(
accName: 'Vayu Meetang',
accNumber: 'Savings XXX-X-XX563-9',
accBalance: '100,505.56',
),
],
);
}
}
The code for the DropdownButton
class SelectAccount extends StatefulWidget {
#override
_SelectAccountState createState() => _SelectAccountState();
}
class _SelectAccountState extends State<SelectAccount> {
var dropdownValue;
var accountNames;
#override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints.expand(width: 375.0, height: 120.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(20.0),
),
child: DropdownButton<String>(
value: dropdownValue,
underline: Container(
height: 2,
),
icon: Icon(Icons.keyboard_arrow_down,
color: Colors.blue[500],),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: accountNames.map((item){
return DropdownMenuItem(
value: item,
child: TheDetails(),
);
}).toList(),
),
);
}
}

Answer 1

You're calling .map() on accountNames which is not initialized, and therefore null at least on the first build. So doing var accountNames = []; will solve the issue.
A cleaner way to add a widget for each member of a list is :
items: [
for(var name in accountNames)
DropdownMenuItem(value: name, child: TheDetails()),
]
EDIT: Putting everything together :
// in top-level or another file
class Account {
Account(this.name, this.number, this.balance);
String name;
String number;
String balance;
}
// in _SelectAccountState or a provider
var selectedAccount = 'Savings XXX-X-XX563-9';
var accounts = [
Account(
'Salary Account',
'Savings XXX-X-XX563-7',
'56,302.56',
),
Account(
'Salary Account 2',
'Savings XXX-X-XX563-8',
'89,302.56',
),
Account(
'Vayu Meetang',
'Savings XXX-X-XX563-9',
'100,505.56',
),
];
// In the build method
DropdownButton<String>(
value: selectedAccount,
items: [
for(var account in accounts)
DropdownMenuItem<String>(
value: account.number,
child: Text(account.name),),
],
onChanged: (val) => setState(() => selectedAccount = val)
),