こんにちは。
株式会社エス・スリーのスタッフです。
本日はタイトル通り、やや小粒な内容となりますが、
「Flutter/DartでRealtime Databaseから取得した値をドロップダウンに表示したい」です。
FlutterでFirestoreを使用する例は比較的よく見つかるのですが、Realtime Databaseの方は、検索クエリを使用する例は特になのですが、見つかりづらかったので記事にしてみます。
まず、Realtime Databaseから値を取得する部分。
例では勤務場所一覧を取得する想定です。
FirebaseのAuthでログインした後に取得します。
FirebaseAuth.instance.userChanges().listen((user) { if (user != null) { final wpRef = FirebaseDatabase.instance .ref("workplace/") .orderByChild('startDate'); var event = await wpRef.once(); if (event.snapshot.exists) { workplaceList.clear(); DataSnapshot dataValues = event.snapshot; for (final DataSnapshot c in dataValues.children) { Mapwp = .from(c.value as Map); _workplaceList.add(WorkPlace( id: c.key, name: wp['workplaceName'].toString())); } } } })
_workplaceListの宣言部は記載していませんが、以下のWorkPlace型のListです。
WorkPlaceクラスは以下のように準備。
class WorkPlace { WorkPlace({ required this.id, required this.name, }); final String id; final String name; }
最後に、ドロップダウンを記述します。
DropdownButton( // 略 items: widget.workPlaces.map((entry) { return DropdownMenuItem( value: entry.name, child: Text(entry.name), ); }).toList(), )