update code to be loaded from asset

mobile/packages/ui/showcase/lib/pages/components/examples/html_text_bold_text.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class HtmlTextBoldText extends StatelessWidget {
+  const HtmlTextBoldText({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichHtmlText(
+      'This is <b>bold text</b> and <strong>strong text</strong>.',
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/html_text_links.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class HtmlTextLinks extends StatelessWidget {
+  const HtmlTextLinks({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichHtmlText(
+      'Read the <docs-link>documentation</docs-link> or visit <github-link>GitHub</github-link>.',
+      linkHandlers: {
+        'docs-link': () {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('Docs link clicked!')));
+        },
+        'github-link': () {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('GitHub link clicked!')));
+        },
+      },
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/html_text_nested_tags.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class HtmlTextNestedTags extends StatelessWidget {
+  const HtmlTextNestedTags({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichHtmlText(
+      'You can <b>combine <link>bold and links</link></b> together.',
+      linkHandlers: {
+        'link': () {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('Nested link clicked!')));
+        },
+      },
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/html_text_page.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/pages/components/examples/html_text_bold_text.dart';
+import 'package:showcase/pages/components/examples/html_text_links.dart';
+import 'package:showcase/pages/components/examples/html_text_nested_tags.dart';
 import 'package:showcase/routes.dart';
 import 'package:showcase/widgets/component_examples.dart';
 import 'package:showcase/widgets/example_card.dart';
@@ -18,55 +20,18 @@ class HtmlTextPage extends StatelessWidget {
         examples: [
           ExampleCard(
             title: 'Bold Text',
-            preview: ImmichHtmlText(
-              'This is <b>bold text</b> and <strong>strong text</strong>.',
-            ),
-            code: '''ImmichHtmlText(
-  'This is <b>bold text</b> and <strong>strong text</strong>.',
-)''',
+            preview: const HtmlTextBoldText(),
+            code: 'html_text_bold_text.dart',
           ),
           ExampleCard(
             title: 'Links',
-            preview: ImmichHtmlText(
-              'Read the <docs-link>documentation</docs-link> or visit <github-link>GitHub</github-link>.',
-              linkHandlers: {
-                'docs-link': () {
-                  ScaffoldMessenger.of(context).showSnackBar(
-                    const SnackBar(content: Text('Docs link clicked!')),
-                  );
-                },
-                'github-link': () {
-                  ScaffoldMessenger.of(context).showSnackBar(
-                    const SnackBar(content: Text('GitHub link clicked!')),
-                  );
-                },
-              },
-            ),
-            code: '''ImmichHtmlText(
-  'Read the <docs-link>documentation</docs-link>.',
-  linkHandlers: {
-    'docs-link': () => launchUrl(docsUrl),
-  },
-)''',
+            preview: const HtmlTextLinks(),
+            code: 'html_text_links.dart',
           ),
           ExampleCard(
             title: 'Nested Tags',
-            preview: ImmichHtmlText(
-              'You can <b>combine <link>bold and links</link></b> together.',
-              linkHandlers: {
-                'link': () {
-                  ScaffoldMessenger.of(context).showSnackBar(
-                    const SnackBar(content: Text('Nested link clicked!')),
-                  );
-                },
-              },
-            ),
-            code: '''ImmichHtmlText(
-  'You can <b>combine <link>bold and links</link></b>.',
-  linkHandlers: {
-    'link': () => handleClick(),
-  },
-)''',
+            preview: const HtmlTextNestedTags(),
+            code: 'html_text_nested_tags.dart',
           ),
         ],
       ),

mobile/packages/ui/showcase/lib/pages/design_system/constants_page.dart

@@ -22,7 +22,7 @@ class _ConstantsPageState extends State<ConstantsPage> {
         subtitle: 'Consistent spacing, sizing, and styling constants.',
         expand: true,
         examples: [
-          ExampleCard(
+          const ExampleCard(
             title: 'Spacing',
             description: 'ImmichSpacing (4.0 → 48.0)',
             preview: Column(
@@ -37,7 +37,7 @@ class _ConstantsPageState extends State<ConstantsPage> {
               ],
             ),
           ),
-          ExampleCard(
+          const ExampleCard(
             title: 'Border Radius',
             description: 'ImmichRadius (0.0 → 24.0)',
             preview: Wrap(
@@ -54,7 +54,7 @@ class _ConstantsPageState extends State<ConstantsPage> {
               ],
             ),
           ),
-          ExampleCard(
+          const ExampleCard(
             title: 'Icon Sizes',
             description: 'ImmichIconSize (16.0 → 48.0)',
             preview: Wrap(
@@ -92,7 +92,7 @@ class _ConstantsPageState extends State<ConstantsPage> {
               ],
             ),
           ),
-          ExampleCard(
+          const ExampleCard(
             title: 'Elevation',
             description: 'ImmichElevation (0.0 → 16.0)',
             preview: Wrap(
@@ -109,7 +109,7 @@ class _ConstantsPageState extends State<ConstantsPage> {
               ],
             ),
           ),
-          ExampleCard(
+          const ExampleCard(
             title: 'Border Width',
             description: 'ImmichBorderWidth (0.5 → 4.0)',
             preview: Column(
@@ -125,7 +125,7 @@ class _ConstantsPageState extends State<ConstantsPage> {
               ],
             ),
           ),
-          ExampleCard(
+          const ExampleCard(
             title: 'Animation Durations',
             description: 'ImmichDuration (100ms → 700ms)',
             preview: Column(
@@ -175,7 +175,10 @@ class _SpacingBox extends StatelessWidget {
         children: [
           SizedBox(
             width: 60,
-            child: Text(label, style: const TextStyle(fontFamily: 'GoogleSansCode')),
+            child: Text(
+              label,
+              style: const TextStyle(fontFamily: 'GoogleSansCode'),
+            ),
           ),
           Container(
             width: size,
@@ -281,7 +284,10 @@ class _BorderBox extends StatelessWidget {
         children: [
           SizedBox(
             width: 80,
-            child: Text(label, style: const TextStyle(fontFamily: 'GoogleSansCode')),
+            child: Text(
+              label,
+              style: const TextStyle(fontFamily: 'GoogleSansCode'),
+            ),
           ),
           Expanded(
             child: Container(

mobile/packages/ui/showcase/lib/pages/home_page.dart

@@ -82,7 +82,7 @@ class _ComponentCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return InkWell(
       onTap: () => context.go(route.path),
-      borderRadius: BorderRadius.circular(LayoutConstants.borderRadiusLarge),
+      borderRadius: const BorderRadius.all(Radius.circular(LayoutConstants.borderRadiusLarge)),
       child: Card(
         child: Padding(
           padding: const EdgeInsets.all(20),
@@ -90,11 +90,7 @@ class _ComponentCard extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisSize: MainAxisSize.min,
             children: [
-              Icon(
-                route.icon,
-                size: 32,
-                color: Theme.of(context).colorScheme.primary,
-              ),
+              Icon(route.icon, size: 32, color: Theme.of(context).colorScheme.primary),
               const SizedBox(height: 16),
               Text(
                 route.name,
@@ -107,10 +103,9 @@ class _ComponentCard extends StatelessWidget {
               const SizedBox(height: 8),
               Text(
                 route.description,
-                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                  color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  height: 1.4,
-                ),
+                style: Theme.of(
+                  context,
+                ).textTheme.bodyMedium?.copyWith(color: Theme.of(context).colorScheme.onSurfaceVariant, height: 1.4),
                 maxLines: 2,
                 overflow: TextOverflow.ellipsis,
               ),

mobile/packages/ui/showcase/lib/widgets/example_card.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:showcase/constants.dart';
 import 'package:syntax_highlight/syntax_highlight.dart';
 
@@ -33,6 +34,21 @@ class ExampleCard extends StatefulWidget {
 
 class _ExampleCardState extends State<ExampleCard> {
   bool _showPreview = true;
+  String? code;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.code != null) {
+      rootBundle
+          .loadString('lib/pages/components/examples/${widget.code!}')
+          .then((value) {
+            setState(() {
+              code = value;
+            });
+          });
+    }
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -69,7 +85,7 @@ class _ExampleCardState extends State<ExampleCard> {
                     ],
                   ),
                 ),
-                if (widget.code != null) ...[
+                if (code != null) ...[
                   const SizedBox(width: 16),
                   Row(
                     children: [
@@ -112,7 +128,7 @@ class _ExampleCardState extends State<ExampleCard> {
                   ),
                 ),
               ),
-              child: _CodeCard(code: widget.code!),
+              child: _CodeCard(code: code!),
             ),
         ],
       ),
@@ -137,14 +153,14 @@ class _ToggleButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return InkWell(
       onTap: onTap,
-      borderRadius: BorderRadius.circular(24),
+      borderRadius: const BorderRadius.all(Radius.circular(24)),
       child: Container(
         padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
         decoration: BoxDecoration(
           color: isSelected
               ? Theme.of(context).colorScheme.primary.withValues(alpha: 0.7)
               : Theme.of(context).colorScheme.primary,
-          borderRadius: BorderRadius.circular(24),
+          borderRadius: const BorderRadius.all(Radius.circular(24)),
         ),
         child: Row(
           mainAxisSize: MainAxisSize.min,

mobile/packages/ui/showcase/pubspec.yaml

@@ -24,6 +24,7 @@ flutter:
   assets:
     - assets/
     - assets/themes/
+    - lib/pages/components/examples/
 
   fonts:
     - family: GoogleSans