チュートリアル: Atlas Device Sync for Flutter

モデルへの新しいプロパティの追加

すべて期待どおりに動作していることが確認できたため、変更を追加できます。このチュートリアルでは、各アイテムに「優先順位」プロパティを追加し、アイテムに優先順位をつけてフィルタリングできるようにしました。

これを行うには、次の手順に従います。

1. flutter.todo.flex プロジェクトで、ファイルlib/realm/schemas.dartを開きます。

2. 次のプロパティを_Itemクラスに追加します。

   lib/realm/schemas.dart

   late int? priority;

3. Item Realm オブジェクト クラスを再生成します。

   dart run realm generate

アイテムの作成および更新時の優先順位の設定

1. lib/realm/realm_services.dartに、priorityを設定および更新するロジックを追加します。また、可能な値を制限するために、 RealmServicesクラスの下にPriorityLevel抽象クラスを追加します。

   lib/realm/realm_services.dart

   // ... imports
   class RealmServices with ChangeNotifier {
     static const String queryAllName = "getAllItemsSubscription";
     static const String queryMyItemsName = "getMyItemsSubscription";
     bool showAll = false;
     bool offlineModeOn = false;
     bool isWaiting = false;
     late Realm realm;
     User? currentUser;
     App app;
     // ... RealmServices initializer and updateSubscriptions(),
     //     sessionSwitch() and switchSubscription() methods
     void createItem(String summary, bool isComplete, int? priority) {
       final newItem = Item(ObjectId(), summary, currentUser!.id,
           isComplete: isComplete, priority: priority);
       realm.write<Item>(() => realm.add<Item>(newItem));
       notifyListeners();
     }
     void deleteItem(Item item) {
       realm.write(() => realm.delete(item));
       notifyListeners();
     }
     Future<void> updateItem(Item item,
         {String? summary,
         bool? isComplete,
         int? priority}) async {
       realm.write(() {
         if (summary != null) {
           item.summary = summary;
         }
         if (isComplete != null) {
           item.isComplete = isComplete;
         }
         if (priority != null) {
           item.priority = priority;
         }
       });
       notifyListeners();
     }
     Future<void> close() async {
       if (currentUser != null) {
         await currentUser?.logOut();
         currentUser = null;
       }
       realm.close();
     }
     @override
     void dispose() {
       realm.close();
       super.dispose();
     }
   }
   abstract class PriorityLevel {
     static int severe = 0;
     static int high = 1;
     static int medium = 2;
     static int low = 3;
   }

2. アイテムの優先順位を設定するウィジェットを含む新しいファイルを追加します。ファイルlib/components/select_priority.dartを作成します。

   lib/components/select_priority.dart

   import 'package:flutter/material.dart';
   import 'package:flutter_todo/realm/realm_services.dart';
   class SelectPriority extends StatefulWidget {
     int priority;
     void Function(int priority) setFormPriority;
     SelectPriority(this.priority, this.setFormPriority, {Key? key})
         : super(key: key);
     @override
     State<SelectPriority> createState() => _SelectPriorityState();
   }
   class _SelectPriorityState extends State<SelectPriority> {
     @override
     Widget build(BuildContext context) {
       return Padding(
         padding: const EdgeInsets.only(top: 15),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             const Text('Priority'),
             DropdownButtonFormField<int>(
               onChanged: ((int? value) {
                 final valueOrDefault = value ?? PriorityLevel.low;
                 widget.setFormPriority(valueOrDefault);
                 setState(() {
                   widget.priority = valueOrDefault;
                 });
               }),
               value: widget.priority,
               items: [
                 DropdownMenuItem(
                     value: PriorityLevel.low, child: const Text("Low")),
                 DropdownMenuItem(
                     value: PriorityLevel.medium, child: const Text("Medium")),
                 DropdownMenuItem(
                     value: PriorityLevel.high, child: const Text("High")),
                 DropdownMenuItem(
                     value: PriorityLevel.severe, child: const Text("Severe")),
               ],
             ),
           ],
         ),
       );
     }
   }

3. ここで、SelectPriorityウィジェットをCreateItemウィジェットとModifyItemウィジェットに追加します。優先順位の設定を処理するための追加ロジックも追加する必要があります。追加する必要があるコードを以下に示します。

   以下のコード例では、追加先のファイルの一部のセクションがコメントに置き換えられ、変更されたコードの関連セクションに焦点が当てられています。

   lib/components/create_item.dartでCreateItemFormウィジェットを編集します。

   lib/components/create_item.dart

   // ... other imports
   import 'package:flutter_todo/components/select_priority.dart';
   // ... CreateItemAction widget
   class CreateItemForm extends StatefulWidget {
     const CreateItemForm({Key? key}) : super(key: key);
     @override
     createState() => _CreateItemFormState();
   }
   class _CreateItemFormState extends State<CreateItemForm> {
     final _formKey = GlobalKey<FormState>();
     late TextEditingController _itemEditingController;
     int _priority = PriorityLevel.low;
     void _setPriority(int priority) {
       setState(() {
         _priority = priority;
       });
     }
     // ... initState() and dispose() @override functions
     @override
     Widget build(BuildContext context) {
       TextTheme theme = Theme.of(context).textTheme;
       return formLayout(
           context,
           Form(
             key: _formKey,
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               mainAxisSize: MainAxisSize.min,
               children: <Widget>[
                 // ... Text and TextFormField widgets
                 SelectPriority(_priority, _setPriority),
                 // ... Padding widget
               ],
             ),
           ));
     }
     void save(RealmServices realmServices, BuildContext context) {
       if (_formKey.currentState!.validate()) {
         final summary = _itemEditingController.text;
         realmServices.createItem(summary, false, _priority);
         Navigator.pop(context);
       }
     }
   }

   lib/components/modify_item.dartでModifyItemFormウィジェットを編集します。

   lib/components/modify_item.dart

   // ... other imports
   import 'package:flutter_todo/components/select_priority.dart';
   class ModifyItemForm extends StatefulWidget {
     final Item item;
     const ModifyItemForm(this.item, {Key? key}) : super(key: key);
     @override
     _ModifyItemFormState createState() => _ModifyItemFormState(item);
   }
   class _ModifyItemFormState extends State<ModifyItemForm> {
     final _formKey = GlobalKey<FormState>();
     final Item item;
     late TextEditingController _summaryController;
     late ValueNotifier<bool> _isCompleteController;
     late int? _priority;
     void _setPriority(int priority) {
       setState(() {
         _priority = priority;
       });
     }
     _ModifyItemFormState(this.item);
     @override
     void initState() {
       _summaryController = TextEditingController(text: item.summary);
       _isCompleteController = ValueNotifier<bool>(item.isComplete)
         ..addListener(() => setState(() {}));
       _priority = widget.item.priority;
       super.initState();
     }
     @override
     void dispose() {
       _summaryController.dispose();
       _isCompleteController.dispose();
       super.dispose();
     }
     @override
     Widget build(BuildContext context) {
       TextTheme myTextTheme = Theme.of(context).textTheme;
       final realmServices = Provider.of<RealmServices>(context, listen: false);
       return formLayout(
           context,
           Form(
               key: _formKey,
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 mainAxisSize: MainAxisSize.min,
                 children: <Widget>[
                   // ... Text and TextFormField widgets
                   SelectPriority(_priority ?? PriorityLevel.medium, _setPriority),
                   // ... StatefulBuilder widget
                   Padding(
                     padding: const EdgeInsets.only(top: 15),
                     child: Row(
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
                         cancelButton(context),
                         deleteButton(context,
                             onPressed: () =>
                                 delete(realmServices, item, context)),
                         okButton(context, "Update",
                             onPressed: () async => await update(
                                 context,
                                 realmServices,
                                 item,
                                 _summaryController.text,
                                 _isCompleteController.value,
                                 _priority)),
                       ],
                     ),
                   ),
                 ],
               )));
     }
     Future<void> update(BuildContext context, RealmServices realmServices,
         Item item, String summary, bool isComplete, int? priority) async {
       if (_formKey.currentState!.validate()) {
         await realmServices.updateItem(item,
             summary: summary, isComplete: isComplete, priority: priority);
         Navigator.pop(context);
       }
     }
     void delete(RealmServices realmServices, Item item, BuildContext context) {
       realmServices.deleteItem(item);
       Navigator.pop(context);
     }
   }

4. lib/components/todo_item.dart内のItemCardウィジェットで、優先順位をつけるための可視化インジケーターを追加します。アイテムの優先順位をつける可視化インジケーターを付与する新たなウィジェット_PriorityIndicatorを作成します。

   先ほど作成した_PriorityIndicatorウィジェットをTodoItemウィジェットに追加します。

   lib/components/todo_item.dart

   // ... imports
   enum MenuOption { edit, delete }
   class TodoItem extends StatelessWidget {
     final Item item;
     const TodoItem(this.item, {Key? key}) : super(key: key);
     @override
     Widget build(BuildContext context) {
       final realmServices = Provider.of<RealmServices>(context);
       bool isMine = (item.ownerId == realmServices.currentUser?.id);
       return item.isValid
           ? ListTile(
               // ... leading property and child content
               title: Row(
                 children: [
                   Padding(
                     padding: const EdgeInsets.only(right: 8.0),
                     child: _PriorityIndicator(item.priority),
                   ),
                   SizedBox(width: 175, child: Text(item.summary)),
                 ],
               ),
               // ... subtitle, trailing, and shape properties with child content
             )
           : Container();
     }
     // ... handleMenuClick() function
   }
   class _PriorityIndicator extends StatelessWidget {
     final int? priority;
     const _PriorityIndicator(this.priority, {Key? key}) : super(key: key);
     Widget getIconForPriority(int? priority) {
       if (priority == PriorityLevel.low) {
         return const Icon(Icons.keyboard_arrow_down, color: Colors.blue);
       } else if (priority == PriorityLevel.medium) {
         return const Icon(Icons.circle, color: Colors.grey);
       } else if (priority == PriorityLevel.high) {
         return const Icon(Icons.keyboard_arrow_up, color: Colors.orange);
       } else if (priority == PriorityLevel.severe) {
         return const Icon(
           Icons.block,
           color: Colors.red,
         );
       } else {
         return const SizedBox.shrink();
       }
     }
     @override
     Widget build(BuildContext context) {
       return getIconForPriority(priority);
     }
   }

およびテストの実行

アプリケーションを再度実行する前に、ホットリスタートを実行します。これにより、新しいスキーマで同期セッションが再起動し、同期エラーを防ぐことができます。

このチュートリアルで以前に作成したアカウントを使ってログインします。過去に作成した 1 つのアイテムが表示されます。新しいアイテムを追加すると、優先順位を設定できるようになります。優先順位を High にし、アイテムを保存します。

ブラウザで Atlas データページに切り替え、 Itemコレクションを更新します。 これでpriorityフィールドが追加され、 1に設定された新しいアイテムが表示されます。 また、次のスクリーンショットに示すように、既存のアイテムにpriorityフィールドも追加され、 nullに設定されていることにも注意してください。

クリックして拡大します

サブスクライブを更新する

lib/realm/realm_services.dartファイルでは、ユーザーのデバイスおよびアカウントと同期するドキュメントを定義する Flexible Sync サブスクリプションを定義します。現在は、ownerプロパティが認証されたユーザーに一致するすべてのドキュメントを同期しています。

現在のサブスクリプション:

  Future<void> updateSubscriptions() async {
    realm.subscriptions.update((mutableSubscriptions) {
      mutableSubscriptions.clear();
      if (showAll) {
        mutableSubscriptions.add(realm.all<Item>(), name: queryAllName);
      } else {
        mutableSubscriptions.add(
            realm.query<Item>(r'owner_id == $0', [currentUser?.id]),
            name: queryMyItemsName);
      }
    });
    await realm.subscriptions.waitForSynchronization();
  }

ここで、高優先度および重大優先度のアイテムのみを同期するようにサブスクリプションを変更します。ご存知のとおり、優先順位フィールドのタイプはint で、最高優先順位（"Severe"）の値は 0、最低優先順位（"Low"）の値は 3 です。

int と優先順位プロパティを直接比較できます。そのために、優先順位が PriorityLevel.high （または 1）以下のアイテムを含むようにサブスクリプション クエリをリファクタリングします。また、サブスクリプションに新しい名前 "getMyHighPriorityItemsSubscription" を付けます。

サブスクリプションを更新して古いサブスクリプションを削除し、優先順位を使用する新しいサブスクリプションを追加します。

// ... imports
class RealmServices with ChangeNotifier {
  static const String queryAllName = "getAllItemsSubscription";
  static const String queryMyItemsName = "getMyItemsSubscription";
  static const String queryMyHighPriorityItemsName =
      "getMyHighPriorityItemsSubscription";
  bool showAll = false;
  bool offlineModeOn = false;
  bool isWaiting = false;
  late Realm realm;
  User? currentUser;
  App app;
  RealmServices(this.app) {
    if (app.currentUser != null || currentUser != app.currentUser) {
      currentUser ??= app.currentUser;
      realm = Realm(Configuration.flexibleSync(currentUser!, [Item.schema]));
      showAll = (realm.subscriptions.findByName(queryAllName) != null);
      // Check if subscription previously exists on the realm
      final subscriptionDoesNotExists =
          (realm.subscriptions.findByName(queryMyHighPriorityItemsName) ==
              null);
      if (realm.subscriptions.isEmpty || subscriptionDoesNotExists) {
        updateSubscriptions();
      }
    }
  }
  Future<void> updateSubscriptions() async {
    realm.subscriptions.update((mutableSubscriptions) {
      mutableSubscriptions.clear();
      if (showAll) {
        mutableSubscriptions.add(realm.all<Item>(), name: queryAllName);
      } else {
        mutableSubscriptions.add(
            realm.query<Item>(
              r'owner_id == $0 AND priority <= $1',
              [currentUser?.id, PriorityLevel.high],
            ),
            name: queryMyHighPriorityItemsName);
      }
    });
    await realm.subscriptions.waitForSynchronization();
  }
  // ... other methods
}

およびテストの実行

アプリケーションを再度実行します。このチュートリアルの前半で作成したアカウントを使用してログインします。

Realm がドキュメントコレクションを再同期する最初の瞬間、以下のようなエラーメッセージが表示される場合があります。

The following RangeError was thrown building StreamBuilder<RealmResultsChanges<Item>>(dirty, state:
_StreamBuilderBaseState<RealmResultsChanges<Item>, AsyncSnapshot<RealmResultsChanges<Item>>>#387c4):
RangeError (index): Invalid value: Only valid value is 0: 3

このエラーは、サブスクリプション更新時に StreamBuilder ウィジェットで発生する可能性があります。製品アプリでは、エラー処理を追加できます。ただし、このチュートリアルでは、ホットリフレッシュを実行するだけでエラーが解消されます。

これで、作成した優先順位の高い新しいアイテムが表示されるはずです。

機能をさらにテストしたい場合は、さまざまな優先度のアイテムを作成できます。優先順位の低い新しいアイテムがアイテム リストに一時的に表示され、その後消えます。Realm はアイテムをローカルに作成し、バックエンドと同期した後、サブスクリプション ルールを満たしていないためアイテムを削除します。これを書き込み補正と言います。

また、最初に作成したドキュメントは優先順位が null になっているため、同期されないことにも注意してください。このアイテムを同期する場合は、Atlas UI でドキュメントを編集して優先順位フィールドに値を追加するか、サブスクリプションを変更して null 値を持つドキュメントを含めることができます。また、サブスクリプションに新しい名前 "getUserItemsWithHighOrNoPriority" を付けます。

class RealmServices with ChangeNotifier {
  static const String queryAllName = "getAllItemsSubscription";
  static const String queryMyItemsName = "getMyItemsSubscription";
  static const String queryMyHighPriorityItemsName =
      "getMyHighPriorityItemsSubscription";
  static const String queryMyHighOrNoPriorityItemsName =
      "getMyHighOrNoPriorityItemsSubscription";
  bool showAll = false;
  bool offlineModeOn = false;
  bool isWaiting = false;
  late Realm realm;
  User? currentUser;
  App app;
  RealmServices(this.app) {
    if (app.currentUser != null || currentUser != app.currentUser) {
      currentUser ??= app.currentUser;
      realm = Realm(Configuration.flexibleSync(currentUser!, [Item.schema]));
      // Check if subscription previously exists on the realm
      final subscriptionDoesNotExists =
          realm.subscriptions.findByName(queryMyHighOrNoPriorityItemsName) ==
              null;
      if (realm.subscriptions.isEmpty || subscriptionDoesNotExists) {
        updateSubscriptions();
      }
    }
  }
  Future<void> updateSubscriptions() async {
    realm.subscriptions.update((mutableSubscriptions) {
      mutableSubscriptions.clear();
      if (showAll) {
        mutableSubscriptions.add(realm.all<Item>(), name: queryAllName);
      } else {
        mutableSubscriptions.add(
            realm.query<Item>(
              r'owner_id == $0 AND priority IN {$1, $2, $3}',
              [currentUser?.id, PriorityLevel.high, PriorityLevel.severe, null],
            ),
            name: queryMyHighPriorityItemsName);
      }
    });
    await realm.subscriptions.waitForSynchronization();
  }
  // ... other methods
}

繰り返しになりますが、新しいサブスクリプションで初めてアプリを開いたときに StreamBuilder エラーが発生した場合は、ホットリフレッシュを実行して期待されるデータを確認してください。