erickzanardo · erickzanardo · Apr 1, 2025 · Apr 1, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # 0.24.0
  - feat: Adding `NesIcons.heart`
-
+ - feat: Adding `NesLink`
 
 # 0.23.0
  - fix: `NesDialog` would rely on the "root" theme, which would break if it was not a nes ui one.

diff --git a/README.md b/README.md
@@ -83,8 +83,6 @@ Find all the widgets in this [catalog](https://nes-ui.pages.dev/) made on [Widge
   width="120"
 />
 
-A general gallery can also be found out here [here](https://erickzanardo.github.io/nes_ui/#/).
-
 ## Getting help
 
 If you need any help or have suggestions, join our [Discord](https://discord.gg/7GHtgtDMtJ).

diff --git a/lib/src/theme.dart b/lib/src/theme.dart
@@ -847,6 +847,59 @@ class NesInputDecorationTheme {
   final Color? focusedErrorBorderColor;
 }
 
+/// {@template nes_link_theme}
+/// Class with information regarding [NesLink] inside NesUI.
+/// {@endtemplate}
+class NesLinkTheme extends ThemeExtension<NesLinkTheme> {
+  /// {@macro nes_link_theme}
+  const NesLinkTheme({
+    required this.linkColor,
+    required this.disabledColor,
+  });
+
+  /// The text color of the link.
+  ///
+  /// fallbacks to the [NesButtonTheme.primary] color.
+  final Color linkColor;
+
+  /// The text color of the link when disabled.
+  ///
+  /// fallbacks to the [TextTheme.bodyMedium] color, with alpha at .4.
+  final Color disabledColor;
+
+  @override
+  ThemeExtension<NesLinkTheme> copyWith({
+    Color? linkColor,
+    Color? disabledColor,
+  }) {
+    return NesLinkTheme(
+      linkColor: linkColor ?? this.linkColor,
+      disabledColor: disabledColor ?? this.disabledColor,
+    );
+  }
+
+  @override
+  ThemeExtension<NesLinkTheme> lerp(
+    covariant ThemeExtension<NesLinkTheme>? other,
+    double t,
+  ) {
+    final otherExt = other as NesLinkTheme?;
+
+    return NesLinkTheme(
+      linkColor: ColorTween(
+            begin: linkColor,
+            end: otherExt?.linkColor,
+          ).lerp(t) ??
+          linkColor,
+      disabledColor: ColorTween(
+            begin: disabledColor,
+            end: otherExt?.disabledColor,
+          ).lerp(t) ??
+          disabledColor,
+    );
+  }
+}
+
 /// Helper methods on [BuildContext] for the Flutter Nes.
 extension NesBuildContext on BuildContext {
   /// Returns the extension of type [T] from the context.
@@ -911,6 +964,7 @@ ThemeData flutterNesTheme({
   NesContainerTheme? nesContainerTheme,
   NesBottomSheetTheme? nesBottomSheetTheme,
   NesInputDecorationTheme? nesInputDecorationTheme,
+  NesLinkTheme? nesLinkTheme,
   Iterable<ThemeExtension<dynamic>> customExtensions = const [],
 }) {
   final iconTheme = nesIconTheme ??
@@ -967,6 +1021,13 @@ ThemeData flutterNesTheme({
         borderColor: textTheme.labelMedium?.color ?? Colors.black,
       );
 
+  final linkTheme = nesLinkTheme ??
+      NesLinkTheme(
+        linkColor: nesButtonTheme.primary,
+        disabledColor: textTheme.bodyMedium?.color?.withValues(alpha: .4) ??
+            Colors.black.withAlpha(150),
+      );
+
   return themeData.copyWith(
     textTheme: textTheme,
     extensions: [
@@ -980,6 +1041,7 @@ ThemeData flutterNesTheme({
       toolTipTheme,
       containerTheme,
       bottomSheetTheme,
+      linkTheme,
       ...customExtensions,
     ],
     dividerTheme: DividerThemeData(

diff --git a/lib/src/widgets/nes_link.dart b/lib/src/widgets/nes_link.dart
@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:nes_ui/nes_ui.dart';
+
+/// {@template nes_link}
+/// A pressable label with a hyperlink style.
+/// {@endtemplate}
+class NesLink extends StatelessWidget {
+  /// @macro nes_link
+  const NesLink({
+    required this.label,
+    this.onPressed,
+    super.key,
+  });
+
+  /// The text to display in the link.
+  final String label;
+
+  /// The callback that is called when the link is pressed.
+  final VoidCallback? onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    final isDisabled =  null;
+    final nesLinkTheme = context.nesThemeExtension<NesLinkTheme>();
+    final textTheme = Theme.of(context).textTheme;
+    final nesTheme = context.nesThemeExtension<NesTheme>();
+    return NesPressable(
+      onPress: onPressed,
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          border: Border(
+            bottom: BorderSide(
+              color: isDisabled
+                  ? nesLinkTheme.disabledColor
+                  : nesLinkTheme.linkColor,
+              width: nesTheme.pixelSize.toDouble(),
+            ),
+          ),
+        ),
+        child: Text(
+          label,
+          style: textTheme.bodyMedium?.copyWith(
+            color: isDisabled
+                ? nesLinkTheme.disabledColor
+                : nesLinkTheme.linkColor,
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/src/widgets/widgets.dart b/lib/src/widgets/widgets.dart
@@ -18,6 +18,7 @@ export 'nes_icon_button.dart';
 export 'nes_input.dart';
 export 'nes_iterable_options.dart';
 export 'nes_key_icon.dart';
+export 'nes_link.dart';
 export 'nes_loading_indicator.dart';
 export 'nes_pressabled.dart';
 export 'nes_progress_bar.dart';

diff --git a/widgetbook/lib/widgetbook/use_cases/links.dart b/widgetbook/lib/widgetbook/use_cases/links.dart
@@ -0,0 +1,26 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:flutter/material.dart';
+import 'package:nes_ui/nes_ui.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(
+  name: 'normal',
+  type: NesLink,
+)
+Widget normal(BuildContext context) => Center(
+      child: NesLink(
+        label: 'This is a link, click it!',
+        onPressed: () {},
+      ),
+    );
+
+@widgetbook.UseCase(
+  name: 'disabled',
+  type: NesLink,
+)
+Widget primary(BuildContext context) => const Center(
+      child: NesLink(
+        label: "Disabled links don't have the onPressed callback",
+      ),
+    );