• トップ
  • ブログ一覧
  • Flutter×FireBaseで掲示板アプリを作ってみた!
  • Flutter×FireBaseで掲示板アプリを作ってみた!

    広告メディア事業部広告メディア事業部
    2021.02.15

    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 アカウントでログインしたら、以下のボタンからプロジェクトを追加します。

    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 します。

    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  # これ2つを追加↓
    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 は、テキストフィールドに書かれた文字列です。

    動作確認してみよう!

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

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

    投稿画面

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

    掲示板デモ2

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

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

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

    さいごに

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

    上手く動作しましたか?

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

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

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

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

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

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

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
    featureImg2020.08.14スマホ技術 特集Android開発Android開発をJavaからKotlinへ変えていくためのお勉強DelegatedPropert...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事

    GitHubActionsのランナーに触れてみた

    こやまん(エンジニア)

    こやまん(エンジニア)

    2024.03.28

    IT技術

    Azure Data FactoryでSlackへ通知をしてみる

    たかやん(エンジニア)

    たかやん(エンジニア)

    2024.03.28

    IT技術

    GCP Secret Managerを使ってみた

    たなゆー(エンジニア)

    たなゆー(エンジニア)

    2024.03.21

    IT技術

    Bitriseのパイプラインと環境変数

    加納(エンジニア)

    加納(エンジニア)

    2024.03.11

    IT技術