Add web support to Flutter example

Add the Flutter web scaffold for the `nativeapi_flutter` example and update the sample app to handle web builds safely. Native-only `nativeapi` features are now guarded behind `kIsWeb`, desktop actions are disabled on the web, and the example shows a clear message that the native backend is unavailable there.

Author: lijy91

bindings/dart/nativeapi_flutter/example/.metadata

@@ -4,7 +4,7 @@
 # This file should be version controlled and should not be manually edited.
 
 version:
-  revision: "9f455d2486bcb28cad87b062475f42edc959f636"
+  revision: "5fc346839b5d0eef006ed8404392afb4dfae428d"
   channel: "stable"
 
 project_type: app
@@ -13,11 +13,11 @@ project_type: app
 migration:
   platforms:
     - platform: root
-      create_revision: 9f455d2486bcb28cad87b062475f42edc959f636
-      base_revision: 9f455d2486bcb28cad87b062475f42edc959f636
-    - platform: ios
-      create_revision: 9f455d2486bcb28cad87b062475f42edc959f636
-      base_revision: 9f455d2486bcb28cad87b062475f42edc959f636
+      create_revision: 5fc346839b5d0eef006ed8404392afb4dfae428d
+      base_revision: 5fc346839b5d0eef006ed8404392afb4dfae428d
+    - platform: web
+      create_revision: 5fc346839b5d0eef006ed8404392afb4dfae428d
+      base_revision: 5fc346839b5d0eef006ed8404392afb4dfae428d
 
   # User provided section
 

bindings/dart/nativeapi_flutter/example/lib/main.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: avoid_print
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:nativeapi_flutter/nativeapi_flutter.dart';
 
@@ -62,15 +63,18 @@ class _MyHomePageState extends State<MyHomePage> {
   int _counter = 0;
 
   late final TrayIcon _trayIcon;
-  late final Menu _menu;
+
+  /// Null on the web, where nativeapi has no backend and every call throws.
+  Menu? _menu;
 
   @override
   void initState() {
     super.initState();
+    if (kIsWeb) return;
 
-    _menu = Menu.create()!;
+    final menu = _menu = Menu.create()!;
     // One listener per emitter now; the event carries which kind it is.
-    _menu.addListener((event) {
+    menu.addListener((event) {
       switch (event) {
         case MenuOpenedEvent(:final menuId):
           print('主菜单打开了！菜单ID: $menuId');
@@ -88,7 +92,7 @@ class _MyHomePageState extends State<MyHomePage> {
           print('$label clicked, item ${event.itemId}');
         }
       });
-      _menu.addItem(item);
+      menu.addItem(item);
     }
   }
 
@@ -133,12 +137,40 @@ class _MyHomePageState extends State<MyHomePage> {
     _trayIcon.setVisible(true);
   }
 
+  void _showContextMenu() {
+    final menu = Menu.create()!;
+    final item1 = MenuItem.createWithLabelAndType(
+      'Item1',
+      MenuItemType.normal,
+    )!;
+    menu.addItem(item1);
+    print(item1.label);
+    final item2 = MenuItem.createWithLabelAndType(
+      'Item2',
+      MenuItemType.normal,
+    )!;
+    menu.addItem(item2);
+    print('Context menu shown, item count: ${menu.itemCount}');
+    menu.open(
+      PositioningStrategy.absolute(const Offset(100.0, 100.0).toNative())!,
+      Placement.bottomStart,
+    );
+  }
+
+  void _openDesktopFeatures() {
+    Navigator.of(context).push(
+      MaterialPageRoute<void>(builder: (_) => const DesktopFeaturesPage()),
+    );
+  }
+
   void _incrementCounter() {
-    for (final display in DisplayManager.instance.getAll()) {
-      print('Display ID: ${display.id}');
-      print('Display Name: ${display.name}');
-      print('Display Width: ${display.size.width}');
-      print('Display Height: ${display.size.height}');
+    if (!kIsWeb) {
+      for (final display in DisplayManager.instance.getAll()) {
+        print('Display ID: ${display.id}');
+        print('Display Name: ${display.name}');
+        print('Display Width: ${display.size.width}');
+        print('Display Height: ${display.size.height}');
+      }
     }
 
     setState(() {
@@ -193,55 +225,36 @@ class _MyHomePageState extends State<MyHomePage> {
               '$_counter',
               style: Theme.of(context).textTheme.headlineMedium,
             ),
+            if (kIsWeb)
+              const Padding(
+                padding: EdgeInsets.all(16),
+                child: Text(
+                  'nativeapi is not available on the web, '
+                  'so the native features below are disabled.',
+                ),
+              ),
             FilledButton(
+              onPressed: kIsWeb ? null : addTrayIcon,
               child: Text('Add TrayIcon'),
-              onPressed: () {
-                addTrayIcon();
-              },
             ),
-            ContextMenuRegion(
-              menu: _menu,
-              child: Container(
-                color: Colors.blue,
-                padding: EdgeInsets.all(16),
-                width: 100,
-                height: 100,
-                child: Center(child: Text('Context Menu Region')),
+            if (_menu case final menu?)
+              ContextMenuRegion(
+                menu: menu,
+                child: Container(
+                  color: Colors.blue,
+                  padding: EdgeInsets.all(16),
+                  width: 100,
+                  height: 100,
+                  child: Center(child: Text('Context Menu Region')),
+                ),
               ),
-            ),
             FilledButton(
+              onPressed: kIsWeb ? null : _showContextMenu,
               child: Text('Show Context Menu'),
-              onPressed: () {
-                final menu = Menu.create()!;
-                final item1 = MenuItem.createWithLabelAndType(
-                  'Item1',
-                  MenuItemType.normal,
-                )!;
-                menu.addItem(item1);
-                print(item1.label);
-                final item2 = MenuItem.createWithLabelAndType(
-                  'Item2',
-                  MenuItemType.normal,
-                )!;
-                menu.addItem(item2);
-                print('Context menu shown, item count: ${menu.itemCount}');
-                menu.open(
-                  PositioningStrategy.absolute(
-                    const Offset(100.0, 100.0).toNative(),
-                  )!,
-                  Placement.bottomStart,
-                );
-              },
             ),
             FilledButton(
+              onPressed: kIsWeb ? null : _openDesktopFeatures,
               child: Text('Desktop Features: Dialogs, Pickers, Notifications'),
-              onPressed: () {
-                Navigator.of(context).push(
-                  MaterialPageRoute<void>(
-                    builder: (_) => const DesktopFeaturesPage(),
-                  ),
-                );
-              },
             ),
           ],
         ),

bindings/dart/nativeapi_flutter/example/web/favicon.png

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="nativeapi_example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>nativeapi_example</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+<body>
+  <!--
+    You can customize the "flutter_bootstrap.js" script.
+    This is useful to provide a custom configuration to the Flutter loader
+    or to give the user feedback during the initialization process.
+
+    For more details:
+    * https://docs.flutter.dev/platform-integration/web/initialization
+  -->
+  <script src="flutter_bootstrap.js" async></script>
+</body>
+</html>

bindings/dart/nativeapi_flutter/example/web/icons/Icon-192.png

@@ -0,0 +1,35 @@
+{
+    "name": "nativeapi_example",
+    "short_name": "nativeapi_example",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}