From eff77e21b035b28668be687a7a1483950bf94517 Mon Sep 17 00:00:00 2001
From: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>
Date: Mon, 2 Feb 2026 21:04:44 +0530
Subject: [PATCH] update code to be loaded from asset
---
.../examples/html_text_bold_text.dart | 13 +++++
.../components/examples/html_text_links.dart | 25 +++++++++
.../examples/html_text_nested_tags.dart | 20 +++++++
.../lib/pages/components/html_text_page.dart | 53 ++++---------------
.../pages/design_system/constants_page.dart | 22 +++++---
.../ui/showcase/lib/pages/home_page.dart | 15 ++----
.../ui/showcase/lib/widgets/example_card.dart | 24 +++++++--
mobile/packages/ui/showcase/pubspec.yaml | 1 +
8 files changed, 107 insertions(+), 66 deletions(-)
create mode 100644 mobile/packages/ui/showcase/lib/pages/components/examples/html_text_bold_text.dart
create mode 100644 mobile/packages/ui/showcase/lib/pages/components/examples/html_text_links.dart
create mode 100644 mobile/packages/ui/showcase/lib/pages/components/examples/html_text_nested_tags.dart
diff --git a/mobile/packages/ui/showcase/lib/pages/components/examples/html_text_bold_text.dart b/mobile/packages/ui/showcase/lib/pages/components/examples/html_text_bold_text.dart
new file mode 100644
index 0000000000..af4c87f40e
--- /dev/null
+++ b/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 bold text and strong text.',
+ );
+ }
+}
diff --git a/mobile/packages/ui/showcase/lib/pages/components/examples/html_text_links.dart b/mobile/packages/ui/showcase/lib/pages/components/examples/html_text_links.dart
new file mode 100644
index 0000000000..a764d7173e
--- /dev/null
+++ b/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 documentation or visit GitHub.',
+ 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!')));
+ },
+ },
+ );
+ }
+}
diff --git a/mobile/packages/ui/showcase/lib/pages/components/examples/html_text_nested_tags.dart b/mobile/packages/ui/showcase/lib/pages/components/examples/html_text_nested_tags.dart
new file mode 100644
index 0000000000..836d949b66
--- /dev/null
+++ b/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 combine bold and links together.',
+ linkHandlers: {
+ 'link': () {
+ ScaffoldMessenger.of(
+ context,
+ ).showSnackBar(const SnackBar(content: Text('Nested link clicked!')));
+ },
+ },
+ );
+ }
+}
diff --git a/mobile/packages/ui/showcase/lib/pages/components/html_text_page.dart b/mobile/packages/ui/showcase/lib/pages/components/html_text_page.dart
index 1b6c8a39a7..64dbc70597 100644
--- a/mobile/packages/ui/showcase/lib/pages/components/html_text_page.dart
+++ b/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 bold text and strong text.',
- ),
- code: '''ImmichHtmlText(
- 'This is bold text and strong text.',
-)''',
+ preview: const HtmlTextBoldText(),
+ code: 'html_text_bold_text.dart',
),
ExampleCard(
title: 'Links',
- preview: ImmichHtmlText(
- 'Read the documentation or visit GitHub.',
- 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 documentation.',
- linkHandlers: {
- 'docs-link': () => launchUrl(docsUrl),
- },
-)''',
+ preview: const HtmlTextLinks(),
+ code: 'html_text_links.dart',
),
ExampleCard(
title: 'Nested Tags',
- preview: ImmichHtmlText(
- 'You can combine bold and links together.',
- linkHandlers: {
- 'link': () {
- ScaffoldMessenger.of(context).showSnackBar(
- const SnackBar(content: Text('Nested link clicked!')),
- );
- },
- },
- ),
- code: '''ImmichHtmlText(
- 'You can combine bold and links.',
- linkHandlers: {
- 'link': () => handleClick(),
- },
-)''',
+ preview: const HtmlTextNestedTags(),
+ code: 'html_text_nested_tags.dart',
),
],
),
diff --git a/mobile/packages/ui/showcase/lib/pages/design_system/constants_page.dart b/mobile/packages/ui/showcase/lib/pages/design_system/constants_page.dart
index 05916f987c..17de02d80a 100644
--- a/mobile/packages/ui/showcase/lib/pages/design_system/constants_page.dart
+++ b/mobile/packages/ui/showcase/lib/pages/design_system/constants_page.dart
@@ -22,7 +22,7 @@ class _ConstantsPageState extends State {
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 {
],
),
),
- ExampleCard(
+ const ExampleCard(
title: 'Border Radius',
description: 'ImmichRadius (0.0 → 24.0)',
preview: Wrap(
@@ -54,7 +54,7 @@ class _ConstantsPageState extends State {
],
),
),
- ExampleCard(
+ const ExampleCard(
title: 'Icon Sizes',
description: 'ImmichIconSize (16.0 → 48.0)',
preview: Wrap(
@@ -92,7 +92,7 @@ class _ConstantsPageState extends State {
],
),
),
- ExampleCard(
+ const ExampleCard(
title: 'Elevation',
description: 'ImmichElevation (0.0 → 16.0)',
preview: Wrap(
@@ -109,7 +109,7 @@ class _ConstantsPageState extends State {
],
),
),
- ExampleCard(
+ const ExampleCard(
title: 'Border Width',
description: 'ImmichBorderWidth (0.5 → 4.0)',
preview: Column(
@@ -125,7 +125,7 @@ class _ConstantsPageState extends State {
],
),
),
- 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(
diff --git a/mobile/packages/ui/showcase/lib/pages/home_page.dart b/mobile/packages/ui/showcase/lib/pages/home_page.dart
index 45bd79a421..de7af6c26b 100644
--- a/mobile/packages/ui/showcase/lib/pages/home_page.dart
+++ b/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,
),
diff --git a/mobile/packages/ui/showcase/lib/widgets/example_card.dart b/mobile/packages/ui/showcase/lib/widgets/example_card.dart
index 162d11b580..fea561afb6 100644
--- a/mobile/packages/ui/showcase/lib/widgets/example_card.dart
+++ b/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 {
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 {
],
),
),
- if (widget.code != null) ...[
+ if (code != null) ...[
const SizedBox(width: 16),
Row(
children: [
@@ -112,7 +128,7 @@ class _ExampleCardState extends State {
),
),
),
- 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,
diff --git a/mobile/packages/ui/showcase/pubspec.yaml b/mobile/packages/ui/showcase/pubspec.yaml
index 01092bd520..e45ce07e66 100644
--- a/mobile/packages/ui/showcase/pubspec.yaml
+++ b/mobile/packages/ui/showcase/pubspec.yaml
@@ -24,6 +24,7 @@ flutter:
assets:
- assets/
- assets/themes/
+ - lib/pages/components/examples/
fonts:
- family: GoogleSans