[Flutter] Firestoreにデータを追加する

Firestoreにデータを追加する

Firestoreにデータを追加する

今回は、前回の続きとしてFlutterからFirestoreにデータの保存の仕方について紹介します。

Firestore側のデータベースは、以下のようになっています。ここから名前（name）、年齢（age）のデータを送信して、Firestoreに保存します。

やり方として、Firestoreのインスタンスを作成して、接続するコレクション（データベース）を定義します。

Firestoreのインスタンスを作成

dbにFirebaseFirestoreのインスタンスを作成します。

static final FirebaseFirestore db = FirebaseFirestore.instance;

コレクションの定義

usersにfirestoreのusersのデータを格納します。

static final CollectionReference users = db.collection('users');

main.dartを開き、_MyHomePageStateクラスに上記の２行を追加します。

main.dart

class _MyHomePageState extends State<MyHomePage> {
  static final FirebaseFirestore db = FirebaseFirestore.instance;
  static final CollectionReference users = db.collection('users');

次にfloatingActionButtonボタンを押したら、nameにdoc、ageに3のデータをusersに追加するaddUserメソッドを作ります。

データの追加するメソッドを作成

usersのコレクションにフィールド（name、age）に対応したデータを定義します。

  Future<void> addUser() async {
    await users.add({'name': 'dog', 'age': 3});
  }

最後に、floatingActionButtonのonPressedしたときの、メソッドをactionに変更すれば、ボタンを押した時の動作が繋がります。

      floatingActionButton: FloatingActionButton(
        onPressed: addUser,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),

コード例

class _MyHomePageState extends State<MyHomePage> {
  static final FirebaseFirestore db = FirebaseFirestore.instance;
  static final CollectionReference users = db.collection('users');

  Future<void> addUser() async {
    users.add({'name': 'dog', 'age': 3});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
      //＜省略＞
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: addUser,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

起動して、フローティングアクションボタンを押すとデータが追加されます。

動作確認

ボタンを押すごとに、age 3、name dog が追加されます。このように、Flutterから簡単にFirestoreに接続してデータを保存することができます。