【Flutter/dart】Chatを作ってみよう…①
はじめに
久々の記事になってしまったが、再開すること、間が空いてもやり続けることが重要と思うことにした。
事前準備
Flutterの導入とコマンドラインツールの使い方は事前に勉強しておいてください。
Flutterに関してはMacとubuntuの導入方法は以前に記事を書いています。
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の準備とかはあるがそれは次回）
次回は、いよいよコーディングの方に入っていこう思います。
Discussion