Flutter×FireBaseで掲示板アプリを作ってみた！
2021.12.20
FlutterとFireBaseで掲示板アプリを作ってみよう！
今回は、Flutter と FireBase を用いて、掲示板アプリを作っていきたいと思います。
また、本記事では、AndroidStudio と Flutter の環境構築が終わっている前提で、話を進めていきます。
まだ準備が整っていない方は、環境構築から進めてみてください。
それでは早速、見ていきましょう！
【準備：Flutter】アプリの土台を作る
まずは、Flutter でプロジェクトを作成して、アプリの土台を作っていきます。
また今回は、掲示板画面と投稿画面を作成し、お互いに遷移するだけのシンプルな UI にしてあります。
では、順に進めていきましょう！
Flutterプロジェクトを作成する
はじめに、AndroidStudio から、Flutter プロジェクトを作成します。
プロジェクトが完成したら、main.dart ファイルに、サンプルコードが書かれた画面が出てくると思います。
Flutter プロジェクトの作成に成功したら、実際に画面を作っていきましょう！
掲示板画面を作る
アプリのメイン画面となる、掲示板画面の UI を作成していきます。
自動生成された、サンプルコードの MyHomePage クラスを、以下のように書き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("掲示板デモ"), actions: [ IconButton( icon: Icon(Icons.edit), ), ], ), body: Center( child: Text( "ここにみんなの投稿が流れる" ), ), ); } } |
この状態でビルドすると、以下のような画面になります。
もし、画面右上に「DEBUG」と表示される場合は、MaterialApp ウィジェットに、以下のように一文追加しましょう。
1 2 3 4 5 6 7 8 9 | return MaterialApp( debugShowCheckedModeBanner: false, // この一文を追加 title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(), ); |
投稿画面を作る
次に、掲示板に文章を投稿する画面を作ります。
新しい Dart ファイル（post.dart とした）を作成して、以下のようなコードにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import 'package:flutter/material.dart'; class PostPage extends StatefulWidget { @override _PostPagePageState createState() => _PostPagePageState(); } class _PostPagePageState extends State<PostPage> { TextEditingController _textEditingController = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("投稿画面"), ), body: Center( child: TextField( controller: _textEditingController, enabled: true, maxLength: 50, // 入力数 maxLengthEnforced: false, // 入力上限になったときに、文字入力を抑制するか style: TextStyle(color: Colors.black), obscureText: false, maxLines:1 , decoration: const InputDecoration( icon: Icon(Icons.speaker_notes), hintText: '投稿内容を記載します', labelText: '内容 * ', ), ), ), ); } } |
掲示板画面から投稿画面に遷移できるようにする
掲示板画面の右上のアイコンをタップしたときに、投稿画面に遷移させるようにしていきましょう。
具体的には、以下のコードを「main.dart」に記載します。
1 2 3 4 5 6 7 8 9 10 | IconButton( icon: Icon(Icons.edit), /// ==ここから追加== onPressed: () { Navigator.of(context).push(MaterialPageRoute(builder: (context) { return PostPage(); })); /// ==ここまで追加== }, ), |
無事、投稿画面に遷移することができました！
これで、掲示板画面と投稿画面を、お互いに遷移できる UI は完成しました。
次に、掲示板機能で重要となる、FireBase の構築を進めます。
【準備：FireBase】アプリと紐付ける
ここからは、掲示板にデータを格納しておく FireBase の設定と、FIreBase とアプリとの紐付けを行います。
Google アカウントが必要になるので、持っていない方は作成しておきましょう。
FireBaseでプロジェクトを作成する
FireBase にアクセスし、Google アカウントでログインしたら、以下のボタンからプロジェクトを追加します。
プロジェクトの名前は、自分の分かりやすいものにしておきましょう。
今回は、Google アナリティクス（分析など）は必要ないので、チェックを外しておきます。
プロジェクトが作成されるまで、少し待ちましょう…。
FIreBaseとアプリを紐付ける
プロジェクト編集の画面で、以下のボタンをクリックします。
ここでは、iOS の場合を解説していきます。
はじめに、アプリのバンドル ID を入力するよう求められるので、入力していきましょう。
ちなみにバンドル ID は、「/ios/Runner.xcodeproj」フォルダを Xcode で開き、Bundle Identifier の欄で確認・編集できます。
次に、「GoogleService-Info.plist」というファイルを、ダウンロードしておきましょう。
そしたら、Xcode で「ios/Runner.xcodeproj」フォルダを開きます。
ここは見落としがちなので、注意してください。
ダウンロードした「GoogleService-Info.plist」ファイルを、「Runner/Runner」フォルダ直下に配置します。
3～5の項目は、すべてスキップして OK です。
次章で登場するプラグインが、すべて解決してくれます！
これで、FireBase とアプリの紐付けは完了です！
では次から、実際に掲示板の機能を作成していきましょう。
掲示板機能を実装する
ここでは、FireBase にデーターベースを作成し、アプリ側からデータを取得・格納する機能を実装していきます。
FireBase では、SQL などは一切使わず、プラグインのみで簡単にデーターベースを操作できるので安心してください。
FireBaseでCloud FireStoreデータベースを作成する
左メニューバーから Cloud FireStore を選択して、「データーベースを作成」をクリックしましょう。
今回は、テストモードで作成しておきます。
本番環境モードでは、鍵の設定などがありますが、本記事の内容と外れるので、割愛させていただきます。
ロケーションは、東京を示す「asia-northeast1」を選択。
データーベースが作成されたら、「コレクションを開始」をクリックします。
以下のように、コレクション ID を「posts」として、次に進みます。
最初のドキュメントを作成する必要があるので、自動 ID をクリック。
フィールドに「content」、値に好きな文字列を挿入して保存します。
これで「posts」コレクションに、「content: "好きな文字列"」を持った、XXXドキュメントが作成できました！
アプリ側では、一つのドキュメントを一つの投稿とみなして、データを取得・格納するようにします。
それでは、アプリ側を実装していきましょう！
Flutterプロジェクトで必要なプラグインをインストールする
まずは、FireBase を操作するプラグインをインストールするために、「pubspec.yaml」ファイルに、以下の記述を追加して pub get します。
1 2 3 4 5 6 7 8 9 10 11 12 | dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.3 # これ２つを追加↓ firebase_core: cloud_firestore: |
追加したプラグインをプログラムから使えるように、「main.dart」「post.dart」の冒頭で、以下のようにインポートしておきましょう。
1 2 | import 'package:firebase_core/firebase_core.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; |
プラグイン追加は、これで OK です。
掲示板画面で、FireBaseのデータを表示する
掲示板画面では、FireBase（Cloud FireStore）に存在するデータを取得して、画面に表示させます。
まずは、FireBase を使えるように、 main() 関数を以下のように書き換えます。
1 2 3 4 5 | Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(MyApp()); } |
次に、投稿内容を FireBase から取得するために、body 部分を以下のように書き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | body: StreamBuilder<QuerySnapshot>( stream: FirebaseFirestore.instance.collection("posts").snapshots(), builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return Center(child: CircularProgressIndicator()); } return ListView( children: snapshot.data.docs.map((DocumentSnapshot document) { return Card( child: ListTile( title: Text(document.data()['content']), subtitle: Text("サブタイトル"), ), ); }).toList(), ); }, ), |
ビルドしてみると、以下のように、FireBase に格納した値が表示されたかと思います。
body 部分について、簡単に解説します。
冒頭の StreamBuilder は、 stream に設定したものに値が入ってくるたびに、builder によって画面が再描画されるようになっています。
また、インターネット接続が、不安定な場合もあるでしょう。
そういった理由で値が取得できない場合は、画面中央にプログレスインジケーターを出すように、if 文を設定してあります。
1 2 3 4 5 6 | body: StreamBuilder<QuerySnapshot>( stream: FirebaseFirestore.instance.collection("posts").snapshots(), builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return Center(child: CircularProgressIndicator()); } |
投稿画面から、FireBaseにデータを送信してみる
投稿画面の実装は、post.dart を編集します。
まずは、キーボードで送信を押されたときに関数が呼ばれるよう、以下のようにコードを追記します。
1 2 3 4 | child: TextField( controller: _textEditingController, onSubmitted: _onSubmitted, // この一文を追加 enabled: true, |
次に、 _onSubmitted 関数を、以下のように作成します。
1 2 3 4 5 6 7 8 9 | _onSubmitted(String content){ CollectionReference posts = FirebaseFirestore.instance.collection('posts'); posts.add({ "content": content }); /// 入力欄をクリアにする _textEditingController.clear(); } |
上記のコードでは、「posts」コレクションに、 "content": content というドキュメントを追加しています。
ちなみに content は、テキストフィールドに書かれた文字列です。
動作確認してみよう！
では、実際に動作を確認してみましょう！
今回は、「初投稿」と入力して、完了ボタンを押してみます。
掲示板画面に戻ると、打ち込んだ内容が表示されていますね！
また、FireBase 上にも、しっかりと表示されています。
このように、FireBase 上に値を格納して、表示させることに成功しました！
さいごに
本記事では、Flutter と FireBase を用いて、掲示板アプリを作る手順を紹介しました。
上手く動作しましたか？
ただ、投稿内容のチェックや様々なエラー処理などは省いたため、上手く動かないことはあるかもしれません…
とはいえ、掲示板アプリの基礎は、分かっていただけたかと思います！
このアプリを応用して、投稿に「日付」や「名前」などのデータを持たせると、より掲示板アプリに近づきます。
ぜひ、チャレンジしてみてください！
ここまで読んでいただき、ありがとうございました！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
- ITエンタメ7月 14, 2023【クリス・ワンストラス】GitHubが出来るまでとソフトウェアの未来
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
