Flutter × Firebaseで10分でチャットアプリを作る

shogo yamada

2018年8月15日 00:29

今回はFlutterとFirebaseのCloud Firestoreを使って両OS対応のチャットアプリを開発します。

なおこの記事は有料にさせていただきます。
もしご興味いただけたら購入の方よろしくお願いします。

また、このチュートリアルでわからないことなどがあればTwitterの方からご連絡お願いいたします。

過去にこんな記事を書いております。こちらは無料ですのでこちらもどうぞ

完成品

完成品はこちらになります。

今回はCloud Firestoreを使ってリアルタイムにチャットができることに特化したチュートリアルなので、レイアウトはそこまで凝ってません。

また、チャットアプリってだいたいログイン機構をちゃんと用意して作成するのが普通だと思いますが、今回はそれもやっていないので、ご了承ください。

目次
・前提
・プロジェクトの作成
・ユーザー名設定画面
・チャット画面を作成
・FirebaseとFlutterの接続
・プラグインの導入
・チャット処理の実装

前提

前提としてFlutterの開発環境を作成しておきましょう。

上の記事は英語ですが、頑張って読んでいただいて環境構築していただけたらと思います。

サーバーサイドの開発環境を作るより圧倒的に楽です。

プロジェクトの作成

プロジェクトを作成したら、色々コメントが書かれたプログラムが書かれていますが無駄なので今回は消してしまいましょう。

画面の真ん中に「Hello World」って表示します。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primaryColor: Colors.white
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ホーム"),
      ),
      body: new Center(
        child: Text("Hello World"),
      ),
    );
  }
}