プログラミング、フリーダイビング、ブロックチェーンのブログ

プログラミング道場

私がおすすめするプログラミング教材のまとめ【書籍と動画】

プログラミング言語 スクリプト言語 コンパイル言語 アプリ開発 サーバー、インフラ、セキュリティなど 機械学習系 ゲーム開発 データベース 子供向け デザイン その他 おまけ まとめ この記事では、様々な書籍を紹介しました。 是非、自分に合 ...

続きを見る

【Flutter入門】FlutterでFirebaseからデータを取り出してリストに出力する方法

更新日:

記事の内容


この記事では、FlutterでFirebaseからデータを取り出して、リストに出力する方法を紹介します。

Firebaseのcollectionの中

messagesというコレクションの中に、senderとtextがあります。

実装後の画面

Firebaseからデータの取得方法

pubspec.yamlに一行を追加してから、パッケージをインストールします。

cloud_firestore: ^0.13.5

データの取得

        final messages = snapshot.data.documents;
        List<MessageBubble> messageBubbles = [];
        for (var message in messages) {
          final messageText = message.data['text'];
          final messageSender = message.data['sender'];

          final messageBubble = MessageBubble(
            sender: messageSender,
            text: messageText,
          );
          messageBubbles.add(messageBubble);
        }

Listにセットする

child: ListView(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20.0),
            children: messageBubbles,
          ),

まとめ

この記事では、FlutterでFirebaseからデータを取り出して、リストに出力する方法を紹介しました。

Good luck for your engineer life!

関連コンテンツ

-Flutter, プログラミング

Copyright© プログラミング道場 , 2020 All Rights Reserved Powered by AFFINGER4.