Make lists page stream-aware

Author: simolus3

demos/supabase-todolist/lib/widgets/list_item_sync_stream.dart

@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+
+import '../powersync.dart';
+import './todo_list_page.dart';
+import '../models/todo_list.dart';
+
+/// A variant of the `ListItem` that only shows a summary of completed and
+/// pending items when the respective list has an active sync stream.
+class SyncStreamsAwareListItem extends StatelessWidget {
+  SyncStreamsAwareListItem({
+    required this.list,
+  }) : super(key: ObjectKey(list));
+
+  final TodoList list;
+
+  Future<void> delete() async {
+    // Server will take care of deleting related todos
+    await list.delete();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    viewList() {
+      var navigator = Navigator.of(context);
+
+      navigator.push(
+          MaterialPageRoute(builder: (context) => TodoListPage(list: list)));
+    }
+
+    return StreamBuilder(
+      stream: db.statusStream,
+      initialData: db.currentStatus,
+      builder: (context, asyncSnapshot) {
+        final status = asyncSnapshot.requireData;
+        final stream =
+            status.forStream(db.syncStream('todos', {'list': list.id}));
+
+        String subtext;
+        if (stream == null || !stream.subscription.active) {
+          subtext = 'Items not loaded - click to fetch.';
+        } else {
+          subtext =
+              '${list.pendingCount} pending, ${list.completedCount} completed';
+        }
+
+        return Card(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: <Widget>[
+              ListTile(
+                onTap: viewList,
+                leading: const Icon(Icons.list),
+                title: Text(list.name),
+                subtitle: Text(subtext),
+              ),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: <Widget>[
+                  IconButton(
+                    iconSize: 30,
+                    icon: const Icon(
+                      Icons.delete,
+                      color: Colors.red,
+                    ),
+                    tooltip: 'Delete List',
+                    alignment: Alignment.centerRight,
+                    onPressed: delete,
+                  ),
+                  const SizedBox(width: 8),
+                ],
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

demos/supabase-todolist/lib/widgets/lists_page.dart

@@ -1,11 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:powersync/powersync.dart';
 
+import '../app_config.dart';
 import './list_item.dart';
 import './list_item_dialog.dart';
 import '../main.dart';
 import '../models/todo_list.dart';
 import 'guard_by_sync.dart';
+import 'list_item_sync_stream.dart';
 
 void _showAddDialog(BuildContext context) async {
   return showDialog<void>(
@@ -55,7 +57,9 @@ class ListsWidget extends StatelessWidget {
             return ListView(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               children: todoLists.map((list) {
-                return ListItemWidget(list: list);
+                return AppConfig.hasSyncStreams
+                    ? SyncStreamsAwareListItem(list: list)
+                    : ListItemWidget(list: list);
               }).toList(),
             );
           } else {