live WEB search

lib/features/home/views/gallery/search_gallery_view.dart

@@ -0,0 +1,61 @@
+part of 'gallery_view.dart';
+
+class _SearchGalleryView extends StatelessWidget {
+  const _SearchGalleryView({
+    required this.galleryViewModel,
+    super.key,
+  });
+
+  final GalleryViewModel galleryViewModel;
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder<List<ImageModel>>(
+      valueListenable: galleryViewModel.imageSearchResultsListenable,
+      builder: (context, final resultsImageModels, _) => FutureBuilder(
+        future: galleryViewModel.lastQueryResultDone,
+        builder: (context, final snapshot) {
+          final Widget displayedWidget;
+
+          switch (snapshot.connectionState) {
+            case ConnectionState.none:
+            case ConnectionState.waiting:
+            case ConnectionState.active:
+              displayedWidget = const CircularProgressIndicator();
+              break;
+            case ConnectionState.done:
+              displayedWidget = Wrap(
+                runSpacing: 24,
+                spacing: 8,
+                alignment: WrapAlignment.center,
+                runAlignment: WrapAlignment.center,
+                crossAxisAlignment: WrapCrossAlignment.center,
+                children: [
+                  for (final imageResult in resultsImageModels)
+                    Image.network(
+                      imageResult.uri.toString(),
+                      loadingBuilder: (context, final child, final loadingProgress) =>
+                          loadingProgress == null
+                              ? child
+                              : Center(
+                                  child: CircularProgressIndicator(
+                                    value: loadingProgress.expectedTotalBytes != null
+                                        ? loadingProgress.cumulativeBytesLoaded /
+                                            loadingProgress.expectedTotalBytes!
+                                        : null,
+                                  ),
+                                ),
+                    ),
+                ],
+              );
+          }
+
+          return AnimatedSwitcher(
+            duration: ConstDurations.halfDefaultAnimationDuration,
+            child: displayedWidget,
+          );
+        },
+      ),
+    );
+  }
+}