Flutter DropdownButtonにFirebaseから取得したjsonのリストを指定する

DropdownButtonの使い方

api.flutter.dev

• Firebaseから取得したオブジェクトの形式

{
  name: 'AAA',
  order: 1,
  folderId: 'id'
}

実際のコード

DropdownButton作成

DropdownButton<String>(
  value: model.selectFolderId,
  hint: Text('フォルダ'),
  icon: const Icon(Icons.arrow_downward),
  elevation: 16,
  style: const TextStyle(color: Colors.deepPurple),
  underline: Container(
  height: 2,
  color: Colors.deepPurpleAccent,
  ),
  onChanged: (String newValue) {
    model.setFolderId(newValue);
  },
  items: _getDropdownMenuItemList(this.folderList)
)

表示メニューを返す関数

List<DropdownMenuItem<String>> _getDropdownMenuItemList(folderList) {
  var dropdownList = <DropdownMenuItem<String>>[];
  dropdownList
      .add(new DropdownMenuItem<String>(value: '', child: Text('選択しない')));
  if (model.folderList != null && folderList.length > 0) {
    for (var folder in folderList) {
      dropdownList.add(new DropdownMenuItem<String>(
          value: folder.folderId, child: Text(folder.name)));
    }
  }
  return dropdownList.toList();
}

ドロップダウンのリストに表示するのはnameで、選択されたときに格納する値はfolderIdを指定する。 provider側で最新のフォルダリストを取得し、DropdownButtonのitemsにリストを表示する。 DropdownMenuItemを別関数からList<DropdownMenuItem>の形で返すことで、リスト最上部にデフォルト値を追加できた。