🐣

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

2022/12/11に公開

はじめに

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

事前準備

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

Flutterに関してはMacとubuntuの導入方法は以前に記事を書いています。

https://zenn.dev/tomofyro/articles/8f60a7527a5a79

FireBaseの導入

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

https://firebase.google.com/?hl=ja

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

プロジェクト作成画面

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

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

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

https://firebase.google.com/docs/cli

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

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

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

$ firebase login

FlutterFire CLIのインストール

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

https://firebase.flutter.dev/docs/cli/

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

$ dart pub global activate flutterfire_cli

Flutterプロジェクトの作成

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

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

FlutterにPackageを導入します。

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

https://pub.dev/packages/firebase_core

https://pub.dev/packages/flutter_chat_ui

https://pub.dev/packages/flutter_chat_types

https://pub.dev/packages/flutter_bloc

https://pub.dev/packages/cloud_firestore

主にはこれになります。

作った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の準備とかはあるがそれは次回)
次回は、いよいよコーディングの方に入っていこう思います。

https://zenn.dev/tomofyro/articles/b690f2c8d32056

Discussion