Tutorial: Sincronización de dispositivos Atlas para Flutter

Agregar una nueva propiedad al modelo

Now that you have confirmed everything is working as expected, we can add changes. In this tutorial, we have decided that we want to add a "priority" property to each Item so that we can filter Items by their priorities.

Para ello siga estos pasos:

1. En el proyecto flutter.todo.flex, abra el archivo lib/realm/schemas.dart.

2. Agregue la siguiente propiedad a la clase _Item:

   lib/realm/schemas.dart

   late int? priority;

3. Regenerate the Item Realm object class:

   dart run realm generate

Set the Priority when Creating and Updating Items

1. En lib/realm/realm_services.dart, agrega lógica para establecer y actualizar priority. También agrega una clase abstracta PriorityLevel debajo de la clase RealmServices para restringir los valores posibles.

   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. Add a new file to contain a widget to set the priority for an Item. Create the file 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. Ahora, añade el widget SelectPriority a los widgets CreateItem y ModifyItem. También necesitas añadir lógica adicional para gestionar la configuración de la prioridad. El código que debes añadir se muestra a continuación.

   Algunas secciones de los archivos que estás agregando se reemplazan con comentarios en los siguientes ejemplos de código para enfocarse en las secciones de código relevantes que se modifican.

   Edita el widget CreateItemForm en lib/components/create_item.dart:

   lib/componentes/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);
       }
     }
   }

   Edita el widget ModifyItemForm en lib/components/modify_item.dart:

   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. Ahora añade un indicador visual de prioridad en el widget ItemCard en lib/components/todo_item.dart. Crea un nuevo widget _PriorityIndicator que brinde un indicador visual de la prioridad del ítem.

   Añade un widget _PriorityIndicator que acabas de crear al widget 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);
     }
   }

Ejecutar y probar

Antes de volver a ejecutar la aplicación, realice un reinicio en caliente. Esto garantiza que la sesión de sincronización se reinicie con el nuevo esquema y evita errores de sincronización.

Luego, Iniciar sesión usando la cuenta que creaste anteriormente en este tutorial. Verás el único elemento que creaste anteriormente. Agrega un nuevo elemento, y verás que ahora puedes establecer la prioridad. Elija High para la prioridad y guarde el elemento.

Ahora vuelve a la página de datos de Atlas en tu navegador y actualiza la colección Item. Ahora deberías ver el nuevo ítem con el campo priority añadido y configurado en 1. También notarás que el Item existente ahora también tiene un campo priority, y está configurado en null, como se muestra en la siguiente captura de pantalla:

haga clic para ampliar

Update the subscription

En el archivo lib/realm/realm_services.dart, definimos la suscripción de Sincronización Flexible que define qué documentos sincronizamos con el dispositivo y la cuenta del usuario. Actualmente, sincronizamos todos los documentos cuya propiedad owner coincide con el usuario autenticado.

La suscripción actual:

  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();
  }

Now we're going to change the subscription to only sync High and Severe priority Items. As you may recall, the priority field is of type int, where the highest priority ("Severe") has a value of 0, and the lowest priority ("Low") has a value of 3.

We can make direct comparisons between an int and the priority property. To do so, we're going to refactor the subscription query to include Items where the priority is less than or equal to PriorityLevel.high (or 1). We will also give the subscription the new name "getMyHighPriorityItemsSubscription".

Actualiza la suscripción para borrar la suscripción antigua y crear una nueva que utilice prioridad:

// ... 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
}

Ejecutar y probar

Vuelve a ejecutar la aplicación. Inicia sesión usando la cuenta que creaste anteriormente en este tutorial.

After an initial moment when Realm resyncs the document collection, you might see an error message resembling the following:

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

Este error puede ocurrir con el widget StreamBuilder a medida que la suscripción se actualiza. En una aplicación de producción, podrías agregar manejo de errores. Pero para el propósito de este tutorial, simplemente realiza una actualización en caliente y el error desaparecerá.

Ahora deberías ver el nuevo elemento de alta prioridad que creaste.

Si desea probar la funcionalidad con más detalle, puede crear elementos con diferentes prioridades. Verá que un nuevo elemento con una prioridad menor aparece brevemente en la lista de elementos y luego desaparece. Realm crea el elemento localmente, lo sincroniza con el backend y lo elimina porque no cumple con las reglas de suscripción. Esto se denomina escritura compensatoria.

También, notarás que el documento que creaste inicialmente no está sincronizado porque tiene una prioridad de null. Si quieres que este elemento se sincronice, puedes editar el documento en la Interfaz de Usuario de Atlas y agregar un valor para el campo de prioridad, o puedes cambiar tu suscripción para incluir documentos con valores nulos. También le daremos a la suscripción el nuevo nombre "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
}

Nuevamente, cuando se produce un error StreamBuilder la primera vez que abres la aplicación con la nueva suscripción, realiza una actualización rápida para ver los datos esperados.