Flutter/DartでRealtime Databaseから取得した値をドロップダウンに表示したい

こんにちは。
株式会社エス・スリーのスタッフです。

本日はタイトル通り、やや小粒な内容となりますが、
「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(),
        )
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次