chore: better demo for mobile

Author: pavanpodila

packages/demo/lib/example_browser.dart

@@ -97,7 +97,43 @@ class _ExampleBrowserState extends State<ExampleBrowser> {
     final theme = Theme.of(context);
 
     return AppBar(
-      title: _buildExampleDropdown(),
+      title: _selectedExample != null
+          ? Row(
+              children: [
+                if (_selectedExample!.icon != null) ...[
+                  Icon(_selectedExample!.icon, size: 20),
+                  const SizedBox(width: 8),
+                ],
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Text(
+                        _selectedExample!.title,
+                        style: theme.textTheme.titleSmall?.copyWith(
+                          fontWeight: FontWeight.w600,
+                        ),
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                      if (_selectedExample!.description.isNotEmpty)
+                        Text(
+                          _selectedExample!.description,
+                          style: theme.textTheme.labelSmall?.copyWith(
+                            color: theme.colorScheme.onSurface.withValues(
+                              alpha: 0.7,
+                            ),
+                          ),
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                    ],
+                  ),
+                ),
+              ],
+            )
+          : const Text('Examples'),
       leading: IconButton(
         icon: const Icon(Icons.menu),
         onPressed: () {
@@ -113,104 +149,6 @@ class _ExampleBrowserState extends State<ExampleBrowser> {
     );
   }
 
-  Widget _buildExampleDropdown() {
-    final theme = Theme.of(context);
-
-    // Build a list that includes both category headers and examples
-    final List<Map<String, dynamic>> allItems = [];
-
-    for (final category in widget.categories) {
-      // Add category header
-      allItems.add({'type': 'category', 'category': category});
-
-      // Add examples under this category
-      for (final example in category.examples) {
-        allItems.add({
-          'type': 'example',
-          'category': category,
-          'example': example,
-        });
-      }
-    }
-
-    // Find current index based on selected example
-    final currentIndex = allItems.indexWhere(
-      (item) =>
-          item['type'] == 'example' &&
-          item['example'] == _selectedExample &&
-          (item['category'] as ExampleCategory).id == _selectedCategoryId,
-    );
-
-    return DropdownButton<int>(
-      value: currentIndex >= 0 ? currentIndex : null,
-      isExpanded: true,
-      underline: const SizedBox(),
-      dropdownColor: theme.colorScheme.surfaceContainerHigh,
-      style: theme.textTheme.titleSmall?.copyWith(
-        color: theme.colorScheme.onSurface,
-        fontWeight: FontWeight.w600,
-      ),
-      items: allItems.asMap().entries.map((entry) {
-        final item = entry.value;
-
-        if (item['type'] == 'category') {
-          // Category header - disabled
-          final category = item['category'] as ExampleCategory;
-          return DropdownMenuItem<int>(
-            value: entry.key,
-            enabled: false,
-            child: Padding(
-              padding: const EdgeInsets.only(top: 8, bottom: 4),
-              child: Text(
-                category.title.toUpperCase(),
-                style: theme.textTheme.labelSmall?.copyWith(
-                  fontWeight: FontWeight.bold,
-                  color: theme.colorScheme.primary,
-                  letterSpacing: 0.5,
-                ),
-              ),
-            ),
-          );
-        } else {
-          // Regular example item
-          final example = item['example'] as Example;
-          return DropdownMenuItem<int>(
-            value: entry.key,
-            child: Padding(
-              padding: const EdgeInsets.only(left: 16),
-              child: Row(
-                children: [
-                  if (example.icon != null) ...[
-                    Icon(example.icon, size: 16),
-                    const SizedBox(width: 8),
-                  ],
-                  Expanded(
-                    child: Text(
-                      example.title,
-                      style: theme.textTheme.bodyMedium,
-                      overflow: TextOverflow.ellipsis,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          );
-        }
-      }).toList(),
-      onChanged: (index) {
-        if (index != null) {
-          final item = allItems[index];
-          // Only handle example selections (categories are disabled)
-          if (item['type'] == 'example') {
-            final category = item['category'] as ExampleCategory;
-            final example = item['example'] as Example;
-            _onExampleSelected(example, category.id);
-          }
-        }
-      },
-    );
-  }
-
   Widget _buildDrawer() {
     return Drawer(
       child: ExampleNavigation(

packages/demo/lib/example_detail_view.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'example_model.dart';
+import 'shared/responsive.dart';
 
 class ExampleDetailView extends StatelessWidget {
   final Example? example;
@@ -13,10 +14,13 @@ class ExampleDetailView extends StatelessWidget {
       return _buildEmptyState(context);
     }
 
+    final isMobile = Responsive.isMobile(context);
+
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        _buildHeader(context, example!),
+        // Skip header in mobile mode as title is shown in AppBar
+        if (!isMobile) _buildHeader(context, example!),
         Expanded(child: example!.builder(context)),
       ],
     );

packages/demo/lib/example_registry.dart

@@ -3,10 +3,10 @@ import 'package:flutter/material.dart';
 import 'example_model.dart';
 // Layout examples
 import 'examples/advanced/alignment.dart';
+// Annotations examples
+import 'examples/advanced/annotations.dart';
 // Advanced examples
 import 'examples/advanced/shortcuts.dart';
-// Annotations examples
-import 'examples/advanced/system.dart';
 import 'examples/advanced/theming.dart';
 import 'examples/advanced/validation.dart';
 import 'examples/advanced/viewer.dart';

packages/demo/lib/examples/advanced/system.dart renamed to packages/demo/lib/examples/advanced/annotations.dart

@@ -29,7 +29,14 @@ class _AnnotationExampleState extends State<AnnotationExample> {
     );
     _setupExampleGraph();
 
-    controller.resetViewport();
+    // Fit view to show all content after first frame
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      Future.delayed(const Duration(milliseconds: 100), () {
+        if (mounted) {
+          controller.fitToView();
+        }
+      });
+    });
   }
 
   void _setupExampleGraph() {
@@ -250,9 +257,6 @@ class _AnnotationExampleState extends State<AnnotationExample> {
               );
             },
           ),
-
-          // Instructions overlay
-          _buildInstructions(),
         ],
       ),
       children: [
@@ -307,42 +311,6 @@ class _AnnotationExampleState extends State<AnnotationExample> {
     );
   }
 
-  Widget _buildInstructions() {
-    return Positioned(
-      top: 16,
-      left: 16,
-      child: Container(
-        padding: const EdgeInsets.all(12),
-        decoration: BoxDecoration(
-          color: Colors.black87,
-          borderRadius: BorderRadius.circular(8),
-        ),
-        child: const Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Text(
-              'Annotation System Demo',
-              style: TextStyle(
-                color: Colors.white,
-                fontSize: 16,
-                fontWeight: FontWeight.bold,
-              ),
-            ),
-            SizedBox(height: 8),
-            Text(
-              '• Drag sticky notes and markers around\n'
-              '• Group annotations follow their nodes\n'
-              '• Green sticky follows Process C\n'
-              '• Use toolbar buttons to add more',
-              style: TextStyle(color: Colors.white, fontSize: 12),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
   void _addRandomStickyNote() {
     final random = DateTime.now().millisecondsSinceEpoch;
     controller.createStickyNote(

packages/demo/lib/examples/advanced/theming.dart

@@ -126,6 +126,10 @@ class _ThemingExampleState extends State<ThemingExample> {
         targetPortId: 'in1',
       ),
     );
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _controller.fitToView();
+    });
   }
 
   void _updateTheme(NodeFlowTheme newTheme) {

packages/demo/lib/examples/advanced/validation.dart

@@ -139,6 +139,10 @@ class _ConnectionValidationExampleState
         targetPortId: 'in1',
       ),
     );
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _controller.fitToView();
+    });
   }
 
   void _showMessage(String message) {

packages/demo/lib/examples/advanced/viewer.dart

@@ -2,33 +2,55 @@ import 'package:flutter/material.dart';
 import 'package:vyuh_node_flow/vyuh_node_flow.dart';
 
 /// Example demonstrating the NodeFlowViewer widget
-class ViewerExample extends StatelessWidget {
+class ViewerExample extends StatefulWidget {
   const ViewerExample({super.key});
 
   @override
-  Widget build(BuildContext context) {
-    return _buildViewer();
-  }
+  State<ViewerExample> createState() => _ViewerExampleState();
+}
 
-  Widget _buildViewer() {
-    final controller = NodeFlowController<String>();
+class _ViewerExampleState extends State<ViewerExample> {
+  late final NodeFlowController<String> _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = NodeFlowController<String>();
 
     // Load sample data
     final nodes = _createSampleNodes();
     final connections = _createSampleConnections();
 
     // Add nodes to controller
     for (final node in nodes.values) {
-      controller.addNode(node);
+      _controller.addNode(node);
     }
 
     // Add connections to controller
     for (final connection in connections) {
-      controller.addConnection(connection);
+      _controller.addConnection(connection);
     }
 
+    // Fit view to show all nodes centered after first frame
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      Future.delayed(const Duration(milliseconds: 100), () {
+        if (mounted) {
+          _controller.fitToView();
+        }
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
     return NodeFlowViewer<String>(
-      controller: controller,
+      controller: _controller,
       nodeBuilder: _buildNode,
       theme: NodeFlowTheme.light,
       enablePanning: true,