見出し画像

【Flutter/dart】Chatを作ってみよう…①


はじめに

久々の記事になってしまったが、再開すること、間が空いてもやり続けることが重要と思うことにした。

事前準備

Flutterの導入とコマンドラインツールの使い方は事前に勉強しておいてください。

FireBaseの導入

先ずはいかにGoogleアカウントログイン状態でアクセスいただき。
「使ってみる」を押してください

こんな感じの画面が出てこれば正解です。

ここで「+」を押し、新しいプロジェクトを作成してみましょう!

FireBase CLIをインストールします。

FireBase CLIについて詳しくは以下を見てください

ルートディレクトリで以下のコマンド叩きます。

$ curl -sL https://firebase.tools | bash

次に以下のコマンドを叩くとブラウザが開くので一番はじめにログインしたアカウントを選択してください。

$ firebase login

FlutterFire CLIのインストール

Flutter CLIについては以下を参照してください。
FlutterプロジェクトろFireBaseプロジェクトが容易に紐付け可能です。

ルートディレクト(わかりやすいディレクトリならなんでもいい)で以下のコマンドを叩いてください。

$ dart pub global activate flutterfire_cli

Flutterプロジェクトの作成

以下のコマンド叩いてFlutterプロジェクトを作成してください。

$ flutter create [プロジェクト名]

FlutterにPackageを導入します。

今回使うPackageは以下になります。

主にはこれになります。

作ったflutterプロジェクトの配下に移動し以下のコマンドを実行します。

$ flutter pub add firebase_core
$ flutter pub add flutter_chat_ui
$ flutter pub add flutter_chat_types
$ flutter pub add flutter_bloc
$ flutter pub add cloud_firestore
$ flutter pub add equatable
$ flutter pub add uuid
$ flutter pub add device_info_plus
$ flutter pub add fluttertoast

または、`pubspec.yaml` というファイルがあるのでその中の`dependencies:`の下にパッケージを記入してください。

パッケージ記載後、念のために以下を叩きます。

$ flutter pub get

FlutterプロジェクトとFireBaseプロジェクトを紐付け

先ほど作成したflutterプロジェクト配下でコマンドを実行します。

$ flutterfire configure

こんな感じで立ち上がるので

先ほどFireBaseコンソールでプロジェクトを作成した人はそのプロジェクトを選択してください。
作成していない人は`<create a new project>`でFireBaseのプロジェクトを新規で作成します。

途中、そのOS向けのプロジェクトにするか聞かれますがここはもうデフォルトの`ios,android,web,linux,macos`全部選択でいいと思います。

このコマンド操作が全て終われば、FlutterプロジェクトとFireBaseプロジェクトを紐付けが完了します。

今回は以上

今回はコーディングする前の準備を一通り書きました!(Podfileの準備とかはあるがそれは次回)
次回は、いよいよコーディングの方に入っていこう思います。

この記事が気に入ったらサポートをしてみませんか?