cloud_storage_gallery 0.1.1

Drop-in Flutter widgets for browsing folders, viewing media, uploading with progress, and thumbnail generation on top of cloud_storage.

cloud_storage_gallery

Ready-made widgets for browsing folders, viewing media, uploading with progress, and generating thumbnails on top of cloud_storage.

Everything inherits from the host app's Theme and respects Directionality.of(context) for RTL/LTR.

Ships with English and Arabic translations out of the box — see Localization below.

Fast path — CloudFolderScreen

Drop-in file browser with every action wired up. This is what the example app uses:

MaterialApp(
  home: CloudFolderScreen(storage: myCloudStorage),
);

For viewer-only users, set readOnly: true:

CloudFolderScreen(storage: myCloudStorage, readOnly: true),

In read-only mode both FABs are hidden and the long-press menu drops Rename, Move to…, and Delete. Open, Download, and Info stay. The flag is a UI concern only — pair it with Firestore/Storage security rules if you need actual protection.

Ships with:

• Breadcrumb in the app bar (tap any segment to jump).
• Grid of subfolders + files, thumbnails when available.
• Long-press context menu — Select, Open, Download, Rename, Move to…, Info, Delete (mutation entries + Select suppressed when readOnly).
• Selection mode — long-press → Select enters multi-select; tap tiles to toggle; the AppBar switches to X selected with bulk Move to… and Delete actions. Selected tiles get a primary-colored border + check-circle badge.
• FABs — Create folder, Upload file (client-side thumbnails generated automatically for images + videos; supports selecting multiple files at once). Hidden when readOnly.
• Upload progress dialog with a Cancel button; failed/cancelled uploads roll back the Firestore doc. For multi-file selections, an aggregate "X of N complete" batch dialog replaces the single-file one.

Building blocks

If you want a different UX, compose your own screen from the pieces:

Widget / helper	Purpose
CloudFolderGrid	Live grid of a folder's contents. Tap and long-press callbacks.
CloudFolderBreadcrumb	Ancestor-chain breadcrumb. Accepts a pre-computed chain to skip fetching.
CloudMediaViewer	Headless, swipeable image/video viewer. You provide the Scaffold / AppBar.
CloudUploadDialog	Progress dialog with an idempotent cancel.
CloudBatchUploadDialog	Aggregate "X of N complete" progress dialog for a list of upload tasks.
pickCloudFolder(...)	Modal folder picker. Returns the selected folder id.
generateThumbnails(File)	JPEG thumb (256w) + preview (1024w) for images + videos. Returns null for other MIME types.

Localization

Register the delegate on your MaterialApp and choose a locale (or let the device locale drive it):

MaterialApp(
  supportedLocales: CloudGalleryLocalizations.supportedLocales,
  localizationsDelegates: const [
    CloudGalleryLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  // Force a locale for testing; omit in production to follow the device.
  locale: const Locale('ar'),
  home: CloudFolderScreen(storage: myStorage),
);

Requires flutter_localizations in your pubspec:

dependencies:
  flutter_localizations:
    sdk: flutter

Adding a language. Subclass CloudGalleryLocalizations, override every getter, and register your own LocalizationsDelegate<CloudGalleryLocalizations> before the built-in one in localizationsDelegates. Your delegate wins for the languages it says it supports; the built-in one covers en and ar and falls back to English otherwise.

Dependencies

Pulls in cached_network_image, photo_view, video_player, chewie, file_picker, share_plus, image, video_thumbnail, mime, path, path_provider. If any of these are unwanted, either fork the widgets or depend only on cloud_storage and build your own UI.