feat:fix share in mobile browser

Author: Endika

README.md

@@ -1,12 +1,28 @@
-# PictoTap
+<p align="center">
+  <img src="web/icons/Icon-192.png" alt="PictoTap" width="96" height="96">
+</p>
 
-A communication app for accessibility built with Flutter. PictoTap enables users to communicate using pictograms — ideal for people who express themselves more easily with visual symbols.
+<h1 align="center">PictoTap</h1>
+
+<p align="center">
+  A communication app for accessibility using pictograms.<br>
+  Built with Flutter for web, installable as a PWA.
+</p>
+
+<p align="center">
+  <a href="https://endika.github.io/pictotap"><strong>Live Demo</strong></a> ·
+  <a href="#features">Features</a> ·
+  <a href="#getting-started">Getting Started</a>
+</p>
+
+---
 
 ## Features
 
 - **Pictogram keyboard** with categorized icons (descriptive, people, prepositions, determiners, nouns, verbs)
 - **Visual board** to compose messages by selecting pictograms
 - **Share** the board as an image with text description
+- **Installable PWA** — add to home screen on Android and iOS
 - **Multi-language support**: English, Spanish, Catalan, Basque, French, Galician, Portuguese, Valencian
 - **Accessibility-focused** design with semantic labels for screen readers
 

lib/image_saver_web.dart

@@ -4,18 +4,44 @@ import 'package:web/web.dart' as web;
 
 Future<void> saveAndShareImage(
     Uint8List bytes, String fileName, String shareText) async {
+  final shared = await _tryNativeShare(bytes, fileName, shareText);
+  if (!shared) {
+    _download(bytes, fileName);
+  }
+}
+
+/// Uses the Web Share API to open the native share sheet on mobile browsers.
+/// Returns false if the API is not available or the share was cancelled.
+Future<bool> _tryNativeShare(
+    Uint8List bytes, String fileName, String shareText) async {
   try {
-    final blob = web.Blob(
-      [bytes.toJS].toJS,
-      web.BlobPropertyBag(type: 'image/png'),
+    final file = web.File(
+      <JSAny>[bytes.toJS].toJS,
+      fileName,
+      web.FilePropertyBag(type: 'image/png'),
     );
-    final url = web.URL.createObjectURL(blob);
-    final anchor = web.HTMLAnchorElement()
-      ..href = url
-      ..download = fileName;
-    anchor.click();
-    web.URL.revokeObjectURL(url);
-  } catch (e) {
-    throw Exception('Failed to download image: $e');
+    final data = web.ShareData(
+      files: <web.File>[file].toJS,
+      text: shareText,
+    );
+    if (!web.window.navigator.canShare(data)) return false;
+    await web.window.navigator.share(data).toDart;
+    return true;
+  } catch (_) {
+    return false;
   }
 }
+
+/// Fallback: triggers a file download (used on desktop browsers).
+void _download(Uint8List bytes, String fileName) {
+  final blob = web.Blob(
+    <JSAny>[bytes.toJS].toJS,
+    web.BlobPropertyBag(type: 'image/png'),
+  );
+  final url = web.URL.createObjectURL(blob);
+  final anchor = web.HTMLAnchorElement()
+    ..href = url
+    ..download = fileName;
+  anchor.click();
+  web.URL.revokeObjectURL(url);
+}