Zenn
😃

flutter cloud firestoreとの接続入門

2023/05/03に公開
Firebase
Firestore
Flutter
tech

flutter初学者が一番わかりやすかったcloud firestore（以下firestoreと略)との接続を紹介します。
色々動画を見ましたが今回のやり方が個人的には分かりやすかったので備忘録として残します。

前提条件

  • flutter doctor が全てOK
  • firebase CLIをインストールしている（ここは個人の環境で好きなように）

自分の環境

  • Mac Book Air 2017
  • macOS Monterey
  • CPU intel Core i5
  • メモリ 8GB

そろそろ買い換えたい！

firestoreに接続

firebaseにログインをします。
登録をしていない方は登録を！

「プロジェクトを追加」をクリック。

次にアナリティクスは必要なさそうだったらオフにして作成。

作成できたら下の画面になるのでflutterプロジェクトと連携していきます！

flutterアイコンをクリックしたらあとはGoogle様の言う通りで大丈夫です。

①では通すべきパスが表示されるのでパスを通すのを忘れないようにしましょう。

export PATH="$PATH":"$HOME/.pub-cache/bin"

というかパスを通さないと②はできませんが

②を実行するとプラットフォームの選択が出るのでOKだったらenter

そして「y」か「n」か聞かれるのでyを打ってenter

公式では

これで、プラットフォームごとのアプリが Firebase に自動的に登録され、
lib/firebase_options.dart 構成ファイルが Flutter プロジェクトに追加されます。

となってます。
firebase_options.dartファイルが出来ていればOKです。

firebaseの初期化とプラグインを追加

プラグイン追加

自分のアプリのプロジェクトのターミナルで以下を実行します。

flutter pub add firebase_core

コードを追記

公式では以下を追加するようになっています。

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

// ...

await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
);

個人的にはこの形が一番分かりやすい

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

これをmain関数の所にいつもコピペしてます。

firestoreにデータ送信

テストも兼ねてデータを送信してみます。
最小限で

と、その前に忘れがちなのがfirestoreの作成です。
ここまではfirebaseとの連携なので自分もよく忘れます笑

左のバーからfirestoreを選択

データベースを作成してテストモードで始めます。

ロケーションは近いところで。

出来たらプラグインを追加

flutter pub add cloud_firestore

これで準備OKです。
以下にデータ送信のための最小限のコードを書きました。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController nameController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('送信テスト'),
      ),
      body: Center(
        child: Column(
          children: [
            TextField(
              controller: nameController,
            ),
            ElevatedButton(
                onPressed: () {
                  FirebaseFirestore.instance
                      .collection('user')
                      .add({'name': nameController.text});
                },
                child: const Text('送信'))
          ],
        ),
      ),
    );
  }
}

最小限なので見た目がアレですがとりあえず「taro」という文字列を送信します。

firestoreを確認すると送信できてました。

おわりに

かなり簡単にfirestoreへデータを送ることができました。

冒頭でも言いましたが私はflutter初学者です。
もっと簡単にできるわ！って人がいれば教えて下さい！

Discussion