1. HOME
  2. ブログ
  3. IT技術
  4. Flutter×FireBaseで掲示板アプリを作ってみた!
Flutter×FireBaseで掲示板アプリを作ってみた

Flutter×FireBaseで掲示板アプリを作ってみた!

FlutterとFireBaseで掲示板アプリを作ってみよう!

今回は、Flutter と FireBase を用いて、掲示板アプリを作っていきたいと思います。

また、本記事では、AndroidStudio と Flutter の環境構築が終わっている前提で、話を進めていきます。

まだ準備が整っていない方は、環境構築から進めてみてください。

それでは早速、見ていきましょう!

【準備:Flutter】アプリの土台を作る

まずは、Flutter でプロジェクトを作成して、アプリの土台を作っていきます。

また今回は、掲示板画面と投稿画面を作成し、お互いに遷移するだけのシンプルな UI にしてあります。

では、順に進めていきましょう!

Flutterプロジェクトを作成する

はじめに、AndroidStudio から、Flutter プロジェクトを作成します。

プロジェクトが完成したら、main.dart ファイルに、サンプルコードが書かれた画面が出てくると思います。

Flutter プロジェクトの作成に成功したら、実際に画面を作っていきましょう!

掲示板画面を作る

アプリのメイン画面となる、掲示板画面の UI を作成していきます。

自動生成された、サンプルコードの MyHomePage クラスを、以下のように書き換えます。

この状態でビルドすると、以下のような画面になります。

掲示板画面を作る

もし、画面右上に「DEBUG」と表示される場合は、MaterialApp ウィジェットに、以下のように一文追加しましょう。

投稿画面を作る

次に、掲示板に文章を投稿する画面を作ります。

新しい Dart ファイル(post.dart とした)を作成して、以下のようなコードにします。

掲示板画面から投稿画面に遷移できるようにする

掲示板画面の右上のアイコンをタップしたときに、投稿画面に遷移させるようにしていきましょう。

具体的には、以下のコードを「main.dart」に記載します。

無事、投稿画面に遷移することができました!

投稿画面

これで、掲示板画面と投稿画面を、お互いに遷移できる UI は完成しました。

次に、掲示板機能で重要となる、FireBase の構築を進めます。

【準備:FireBase】アプリと紐付ける

ここからは、掲示板にデータを格納しておく FireBase の設定と、FIreBase とアプリとの紐付けを行います。

Google アカウントが必要になるので、持っていない方は作成しておきましょう。

FireBaseでプロジェクトを作成する

FireBase にアクセスし、Google アカウントでログインしたら、以下のボタンからプロジェクトを追加します。

FireBaseでプロジェクトを作成する

プロジェクトの名前は、自分の分かりやすいものにしておきましょう。

プロジェクトの名前をつける

今回は、Google アナリティクス(分析など)は必要ないので、チェックを外しておきます。

Google アナリティクス設定

プロジェクトが作成されるまで、少し待ちましょう…。

FIreBaseとアプリを紐付ける

プロジェクト編集の画面で、以下のボタンをクリックします。

ここでは、iOS の場合を解説していきます。

FIreBaseとアプリを紐付ける

はじめに、アプリのバンドル ID を入力するよう求められるので、入力していきましょう。

アプリのバンドル ID を入力するよう求められる

ちなみにバンドル ID は、「/⁨ios⁩/Runner.xcodeproj」フォルダを Xcode で開き、Bundle Identifier の欄で確認・編集できます。

「/⁨ios⁩/Runner.xcodeproj」フォルダを Xcode で開き、Bundle Identifier の欄で確認・編集

次に、「GoogleService-Info.plist」というファイルを、ダウンロードしておきましょう。

「GoogleService-Info.plist」というファイルを、ダウンロード

そしたら、Xcode で「ios/Runner.xcodeproj」フォルダを開きます

ここは見落としがちなので、注意してください。

ダウンロードした「GoogleService-Info.plist」ファイルを、「Runner/Runner」フォルダ直下に配置します。

ダウンロードした「GoogleService-Info.plist」ファイルを、「Runner/Runner」フォルダ直下に配置

3~5の項目は、すべてスキップして OK です。

次章で登場するプラグインが、すべて解決してくれます!

FireBase とアプリの紐付けは完了

これで、FireBase とアプリの紐付けは完了です!

では次から、実際に掲示板の機能を作成していきましょう。

掲示板機能を実装する

ここでは、FireBase にデーターベースを作成し、アプリ側からデータを取得・格納する機能を実装していきます。

FireBase では、SQL などは一切使わず、プラグインのみで簡単にデーターベースを操作できるので安心してください。

FireBaseでCloud FireStoreデータベースを作成する

左メニューバーから Cloud FireStore を選択して、「データーベースを作成」をクリックしましょう。

FireBaseでCloud FireStoreデータベースを作成する

今回は、テストモードで作成しておきます。

本番環境モードでは、鍵の設定などがありますが、本記事の内容と外れるので、割愛させていただきます。

テストモードで開始する

ロケーションは、東京を示す「asia-northeast1」を選択。

ロケーションは、東京を示す「asia-northeast1」を選択

データーベースが作成されたら、「コレクションを開始」をクリックします。

以下のように、コレクション ID を「posts」として、次に進みます。

コレクション ID を「posts」として、次に進む

最初のドキュメントを作成する必要があるので、自動 ID をクリック。

最初のドキュメントを作成する必要があるので、自動 ID をクリック

フィールドに「content」、値に好きな文字列を挿入して保存します。

フィールドに「content」、値に好きな文字列を挿入して保存

これで「posts」コレクションに、「content: "好きな文字列"」を持った、XXXドキュメントが作成できました!

「posts」コレクションに、「content: "好きな文字列"」を持った、XXXドキュメントが作成される

アプリ側では、一つのドキュメントを一つの投稿とみなして、データを取得・格納するようにします。

それでは、アプリ側を実装していきましょう!

Flutterプロジェクトで必要なプラグインをインストールする

まずは、FireBase を操作するプラグインをインストールするために、「pubspec.yaml」ファイルに、以下の記述を追加して pub get します。

追加したプラグインをプログラムから使えるように、「main.dart」「post.dart」の冒頭で、以下のようにインポートしておきましょう。

プラグイン追加は、これで OK です。

掲示板画面で、FireBaseのデータを表示する

掲示板画面では、FireBase(Cloud FireStore)に存在するデータを取得して、画面に表示させます。

まずは、FireBase を使えるように、 main() 関数を以下のように書き換えます。

次に、投稿内容を FireBase から取得するために、body 部分を以下のように書き換えます。

ビルドしてみると、以下のように、FireBase に格納した値が表示されたかと思います。

掲示板デモ

body 部分について、簡単に解説します。

冒頭の StreamBuilder は、 stream に設定したものに値が入ってくるたびに、builder によって画面が再描画されるようになっています。

また、インターネット接続が、不安定な場合もあるでしょう。

そういった理由で値が取得できない場合は、画面中央にプログレスインジケーターを出すように、if 文を設定してあります。

投稿画面から、FireBaseにデータを送信してみる

投稿画面の実装は、post.dart を編集します。

まずは、キーボードで送信を押されたときに関数が呼ばれるよう、以下のようにコードを追記します。

次に、 _onSubmitted 関数を、以下のように作成します。

上記のコードでは、「posts」コレクションに、 "content": content  というドキュメントを追加しています。

ちなみに content は、テキストフィールドに書かれた文字列です。

動作確認してみよう!

では、実際に動作を確認してみましょう!

今回は、「初投稿」と入力して、完了ボタンを押してみます。

投稿画面

掲示板画面に戻ると、打ち込んだ内容が表示されていますね!

掲示板デモ2

また、FireBase 上にも、しっかりと表示されています。

FireBase 上にも、しっかりと表示されている

このように、FireBase 上に値を格納して、表示させることに成功しました!

さいごに

本記事では、Flutter と FireBase を用いて、掲示板アプリを作る手順を紹介しました。

上手く動作しましたか?

ただ、投稿内容のチェックや様々なエラー処理などは省いたため、上手く動かないことはあるかもしれません…

とはいえ、掲示板アプリの基礎は、分かっていただけたかと思います!

このアプリを応用して、投稿に「日付」や「名前」などのデータを持たせると、より掲示板アプリに近づきます。

ぜひ、チャレンジしてみてください!

ここまで読んでいただき、ありがとうございました!

こちらの記事もオススメ!


書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア