> ## Documentation Index
> Fetch the complete documentation index at: https://starrycodes.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Text - Widget Extensions

> Easily convert specific words within a Text widget into clickable hyperlinks using TextSpan and TapGestureRecognizer, eliminating manual Text.rich boilerplate.

<Steps titleSize="h3">
  <Step title="🖱️ Hyperlink Conversion">
    <ResponseField name="addHyperLinks({List<String> hyperLinkTexts, bool showUnderline, bool makeBold, Color? hyperLinkColor, Function(String word)? onHyperlinkClicked})" type="Text">
      <Expandable title="Parameters">
        <ParamField body="hyperLinkTexts" type="List<String>" default="REQUIRED">
          A list of words (`strings`) that should be converted into clickable `links`.
        </ParamField>

        <ParamField body="onHyperlinkClicked" type="Function(String word)?" default="null">
          The `callback` `function` to execute when a linked word is tapped. The tapped `word` is passed as an `argument`.
        </ParamField>

        <ParamField body="showUnderline" type="bool" default="true">
          If `true`, adds a text decoration `underline`.
        </ParamField>

        <ParamField body="makeBold" type="bool" default="false">
          If `true`, increases the `font weight` of the link.
        </ParamField>

        <ParamField body="hyperLinkColor" type="Color?" default="Colors.blue">
          The `color` of the clickable link text.
        </ParamField>
      </Expandable>

      Converts specific words within the `text` into clickable hyperlinks. It works by rebuilding the `Text` widget using `Text.rich` and wrapping the target words in a `TapGestureRecognizer`.

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      // Links 'link' in a purple, bold, and underlined style.
      const Text('This is a link to the page.')
          .addHyperLinks(
              hyperLinkTexts: ['link'],
              hyperLinkColor: Colors.purple,
              makeBold: true,
              onHyperlinkClicked: (word) => print('Tapped: $word'));
      ```
    </ResponseField>
  </Step>
</Steps>