GSLink

With links, users can navigate seamlessly throughout a website. This widget has a hyperlinked appearance for a user-friendly experience.
API Reference
This is an illustration of a Themed GSLink widget with default configuration.

    import 'package:gluestack_ui/gluestack_ui.dart';

    GSLink(
      style: GSStyle(),
      url: 'https://gluestack.io/',
      text: const GSLinkText(text: 'gluestack'),
    )

API Reference

Import

To use this component in your project, include the following import statement in your file.
import "package:gluestack_ui/gluestack_ui.dart"

Widget Parameters

This section provides a comprehensive reference list for the widget parameters, detailing descriptions, properties, types, and default behavior for easy project integration.
Contains all link related layout style properties and actions. It inherits all the properties of Flutter's InkWell widget.
Parameters
Type
Default
Description
url
String
-
URL that should be opened on Link press.
isExternal
bool
false
If true, link will be opened in new tab on web.
isHovered
boolean
false
When true, the link displays a hover state.

GSLinkText

Contains all text related layout style properties and actions. It inherits all the properties of Flutter's Text widget.

Accessibility

We have outlined the various features that ensure the GSLink widget is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. Adheres to the WAI-ARIA design pattern.

Keyboard

  • Tab: Moves focus to the next focusable widget.
  • Enter: Users should be able to open a link.

Screen Reader

  • VoiceOver: When a link receives focus, screen readers should announce a descriptive link name.

Examples

The Examples section provides visual representations of the different variants of the widget, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Default


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSHStack(
      children: [
        const GSText(text: 'Design inspiration from'),
        const SizedBox(width: 10),
        GSLink(
          style: GSStyle(),
          url: 'https://gluestack.io/',
          text: GSLinkText(
            text: 'gluestack',
            style: GSStyle(textStyle: const TextStyle(fontSize: 18)),
          ),
        ),
      ],
    )



    import 'package:gluestack_ui/gluestack_ui.dart';

    GSHStack(
      children: [
        const GSText(text: 'Go to'),
        const SizedBox(width: 10),
        GSLink(
          style: GSStyle(),
          url: 'https://gluestack.io/',
          text: GSLinkText(
            text: 'gluestack',
            style: GSStyle(textStyle: const TextStyle(fontSize: 18)),
          ),
        ),
        const SizedBox(width: 10),
        const GSIcon(icon: Icons.arrow_circle_right_outlined),
      ],
    )

Edit this page on GitHub
Go back
Input
Up next
Pressable
Go back
Input
Up next
Pressable