refactored code

lib/ui/viewer/file/collections_list_of_file_widget.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:logging/logging.dart';
-import 'package:photos/ente_theme_data.dart';
 import 'package:photos/models/collection_items.dart';
 import 'package:photos/services/collections_service.dart';
 import 'package:photos/ui/common/loading_widget.dart';
+import 'package:photos/ui/viewer/file/file_info_collection_widget.dart';
 import 'package:photos/ui/viewer/gallery/collection_page.dart';
 import 'package:photos/utils/navigation_util.dart';
 
@@ -29,8 +29,9 @@ class CollectionsListOfFile extends StatelessWidget {
             itemCount: collections.length,
             scrollDirection: Axis.horizontal,
             itemBuilder: (context, index) {
-              return GestureDetector(
+              return FileInfoCollection(
-                onTap: () {
+                collections[index].name,
+                () {
                   routeToPage(
                     context,
                     CollectionPage(
@@ -38,32 +39,6 @@ class CollectionsListOfFile extends StatelessWidget {
                     ),
                   );
                 },
-                child: Container(
-                  margin: const EdgeInsets.only(
-                    top: 10,
-                    bottom: 18,
-                    right: 8,
-                  ),
-                  decoration: BoxDecoration(
-                    color: Theme.of(context)
-                        .colorScheme
-                        .inverseBackgroundColor
-                        .withOpacity(0.025),
-                    borderRadius: const BorderRadius.all(
-                      Radius.circular(8),
-                    ),
-                  ),
-                  child: Center(
-                    child: Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 8),
-                      child: Text(
-                        collections[index].name,
-                        style: Theme.of(context).textTheme.subtitle2,
-                        overflow: TextOverflow.ellipsis,
-                      ),
-                    ),
-                  ),
-                ),
               );
             },
           );

lib/ui/viewer/file/device_folders_list_of_file_widget.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:logging/logging.dart';
+import 'package:photos/ui/common/loading_widget.dart';
+import 'package:photos/ui/viewer/file/file_info_collection_widget.dart';
+
+class DeviceFoldersListOfFile extends StatelessWidget {
+  final Future<Set<String>> allDeviceFoldersOfFile;
+  const DeviceFoldersListOfFile(this.allDeviceFoldersOfFile, {Key key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder(
+      future: allDeviceFoldersOfFile,
+      builder: (context, snapshot) {
+        if (snapshot.hasData) {
+          final List<String> deviceFolders = snapshot.data.toList();
+          return ListView.builder(
+            itemCount: deviceFolders.length,
+            scrollDirection: Axis.horizontal,
+            itemBuilder: (context, index) {
+              return FileInfoCollection(
+                deviceFolders[index],
+                () {},
+              );
+            },
+          );
+        } else if (snapshot.hasError) {
+          Logger("DeviceFoldersListOfFile").info(snapshot.error);
+          return const SizedBox.shrink();
+        } else {
+          return const EnteLoadingWidget();
+        }
+      },
+    );
+  }
+}

lib/ui/viewer/file/file_info_collection_widget.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:photos/ente_theme_data.dart';
+
+class FileInfoCollection extends StatelessWidget {
+  final String name;
+  final Function onTap;
+  const FileInfoCollection(this.name, this.onTap, {Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        margin: const EdgeInsets.only(
+          top: 10,
+          bottom: 18,
+          right: 8,
+        ),
+        decoration: BoxDecoration(
+          color: Theme.of(context)
+              .colorScheme
+              .inverseBackgroundColor
+              .withOpacity(0.025),
+          borderRadius: const BorderRadius.all(
+            Radius.circular(8),
+          ),
+        ),
+        child: Center(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8),
+            child: Text(
+              name,
+              style: Theme.of(context).textTheme.subtitle2,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}