Link | Remix Documentation

Starting Flutter example…

Live Flutter from this checkout’s component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

Text that takes the user somewhere else.

When to use this

Navigation: Move to another route, document, or external destination
Inline references: Link a word or phrase inside a paragraph
Secondary actions that navigate: "View all", "Read the docs", "Learn more"

Reach for RemixButton instead when activation changes state in place — submitting, toggling, opening a dialog. The distinction is not cosmetic: a link publishes the Link role and activates on Enter only, while a button publishes the Button role and also activates on Space.

Basic implementation

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

class LinkExample extends StatelessWidget {
  const LinkExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      spacing: 16,
      children: [
        RemixLink(
          label: 'Read the docs',
          style: style,
          onPressed: () => debugPrint('navigate'),
        ),
        // No callback: a disabled link, same as `enabled: false`.
        const RemixLink(label: 'Coming soon'),
      ],
    );
  }

  LinkStyler get style {
    return LinkStyler()
        .labelColor(Colors.indigo)
        .onHovered(
          LinkStyler().label(
            TextStyler()
                .decoration(TextDecoration.underline)
                .decorationColor(Colors.indigo),
          ),
        );
  }
}

RemixLink never launches anything. onPressed performs the navigation, so the component works the same with a router, a URL launcher, or a scroll controller.

linkUrl is assistive metadata that rides along on the semantics node. On Flutter web it also becomes an anchor href, so omit it when onPressed already navigates — otherwise a single click has two navigation owners.

Destination metadata

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

class LinkUrlExample extends StatelessWidget {
  const LinkUrlExample({super.key});

  @override
  Widget build(BuildContext context) {
    return RemixLink(
      label: 'Remix on GitHub',
      // Safe here: the callback hands off to the platform rather than routing
      // in-app, so the web anchor and the callback agree on the destination.
      linkUrl: Uri.parse('https://github.com/btwld/remix'),
      semanticHint: 'Opens in a new window',
      onPressed: () => debugPrint('launch'),
    );
  }
}

Two ways to disable, one behaviour

onPressed: null and enabled: false both disable the link, exactly as a null callback disables any other Flutter control. A disabled link announces itself as unavailable and gives up its Link role, destination, focus stop, and tap action.

For text that was never meant to be followed, use ordinary text rather than a link with no callback.

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

Fortal variants

import 'package:flutter/material.dart';
import 'ui/ui.dart';

class FortalLinkExample extends StatelessWidget {
  const FortalLinkExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      spacing: 16,
      children: [
        FortalLink('Auto', onPressed: () {}),
        FortalLink(
          'Always',
          underline: FortalLinkUnderline.always,
          onPressed: () {},
        ),
        FortalLink(
          'On hover',
          underline: FortalLinkUnderline.hover,
          onPressed: () {},
        ),
        FortalLink(
          'None',
          underline: FortalLinkUnderline.none,
          onPressed: () {},
        ),
      ],
    );
  }
}

See the fortalLinkStyle source code for all available options.

Constructor

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

RemixLink remixLinkConstructor({
  Key? key,
  String? label,
  Widget? child,
  VoidCallback? onPressed,
  bool enabled = true,
  Uri? linkUrl,
  FocusNode? focusNode,
  bool autofocus = false,
  bool enableFeedback = true,
  MouseCursor mouseCursor = SystemMouseCursors.click,
  String? semanticLabel,
  String? semanticHint,
  bool excludeSemantics = false,
  LinkStyler style = const LinkStyler.create(),
  LinkSpec? styleSpec,
}) => throw UnimplementedError();

On this page