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