こんにちは。
株式会社エス・スリーのスタッフです。
本日はタイトル通り、やや小粒な内容となりますが、
「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) {
Map wp =
.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(), )
