Flutter에서 FieldValue.arrayUnion & arrayRemove를 사용할 때의 메모

소개

Flutter를 사용해 네이티브 앱을 만들고 있지만, Widget의 사용법이나 Firestore와의 데이터 연계 방법 등, 코드의 작성 방법을 모르고 그 나름대로 고생하고 있다.
일단 알고 버리면 상당히 고속으로 앱 개발을 할 수 있을 것 같기 때문에, 사용법이나 코드의 작성 방법의 메모를 남겨 둔다.
이번은 타이틀에 있는 대로, Firestore를 조작할 때의 array형의 데이터 갱신에 대해서 메모를 남긴다.

Flutter 실행 환경

우분투 18.04LTS (GCP)

Flutter 1.22.6

Dart 2.10.5

Android Studio 4.1.2

VScode 1.53.0

메모 내용

Firestore에서 array형의 필드를 작성해 두고, 그것에 대해서 FieldValue.arrayUnion ＆ arrayRemove 를 사용해 요소의 추가, 삭제를 시도해 보았다.
간단한 array형과 array 안이 한층 더 MAP형으로 되어 있는 2개의 패턴으로, 코드의 기입 방법을 확인해 본다.

Firestore의 데이터 구조는 다음과 같은 느낌으로 준비

다음 main.dart를 만들고 flutter run 실행

main.dart

// 必要パッケージのインポート
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() {
  runApp(testApp());
}

// メインで呼び出されるクラス。
class testApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final db_ope = CloudFirestore_update();

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("ホーム"),
        ), // appBar プロパティに AppBar Widget を追加
        body: Center(child: Text("Firestoreの連携テスト")),

        // 右下にアクションボタンを設置して、ここをクリックすると、今回試したい機能を実行できる仕組み。
        floatingActionButton: Container(
          margin: EdgeInsets.only(bottom: 10.0), // ボタンの配置
          width: 40.0,
          height: 40.0,
          child: FloatingActionButton(
            //tooltip: 'Increment',
            child: Icon(Icons.add),
            onPressed: () =>
                // 以下の4つの内、どれかのコメントアウトを外して実行結果を確認してみる。
                 db_ope.add_element_simple('test_document'),
                // db_ope.delete_element_simple('test_document'),
                // db_ope.add_element_map('test_document'),
                // db_ope.delete_element_map('test_document'),
          ),
        ),
      ),
    );
  }
}

// 今回FirestoreのUpdate操作を行うためのクラスを作成。
class CloudFirestore_update {
  static const String target_collection = 'test_collection';

  // arrayUnionを使った更新（要素追加）
  void add_element_simple(String document_id) {
    String colc = target_collection;

    Firestore.instance.collection(colc).document(document_id).updateData({
      'array_field1':
          FieldValue.arrayUnion(['add-data1-1', 'add-data1-2', 'add-data1-2'])
    });
  }
  // ⇒ 2番目と3番目は要素の中身が同じため追加されるデータは２つのみ！


  // arrayRemoveを使った更新（要素削除）
  void delete_element_simple(String document_id) {
    String colc = target_collection;

    Firestore.instance.collection(colc).document(document_id).updateData({
      'array_field1': FieldValue.arrayRemove(['data1-1', 'add-data1-2'])
    });
  }
  // ⇒ 試しに中身が同じ要素のデータ２つ用意すると、両方とも消えてしまう！


  // arrayUnionを使った更新（要素追加） ※arrayの中がMAP型
  void add_element_map(String document_id) {
    String colc = target_collection;

    Firestore.instance.collection(colc).document(document_id).updateData({
      'array_field2': FieldValue.arrayUnion([
        {
          'map2c': 'new_field',
          'map2d': 'new_field',
        },
      ]),
    });
  }
  // ⇒ array型の中でそもそも作成していたField構造とは関係なく要素追加が可能なため、注意が必要！


  // arrayRemoveを使った更新（要素削除）※arrayの中がMAP型
  void delete_element_map(String document_id) {
    String colc = target_collection;

    Firestore.instance.collection(colc).document(document_id).updateData({
      'array_field2': FieldValue.arrayRemove([
        {
          'map2a': 'data2-a',
          'map2b': 'data2b',
        },
      ]),
    });
  }
   // ⇒ array型の中身のMAP内の要素が完全一致していない削除されない。（逆に完全一致するものが複数ある場合は同時に消える。）
}

※Firestore 패키지를 잘 사용할 수 없는 경우는, 이쪽의 기사를 참고로!
【Flutter로부터 Cloud Firestore의 데이터 취득 & 데이터 기입】

위의 main.dart를 실행하면 에뮬레이터에서 다음과 같이됩니다.

오른쪽 하단의 액션 버튼을 클릭하면 Firestore의 조작이 움직입니다.
※액션 버튼으로 불려 가는 메소드는, main.dart 내의 onPressed: 의 부분으로 설정한다.

비고

FieldValue.arrayRemove' 를 사용했을 때, index를 이용한 삭제를 할 수 있을까 생각하고 있었지만, 여러가지 시험하거나 조사해 보았지만 방법을 모르고 있었다. (처음 할 수 없어?)
만약 방법을 알면 업데이트합니다.