Make specific parts of a text clickable in flutter [duplicate]

Question

I want to make a part of a text tapable so I can call a function on it. Also I want to have control over the style of the tapable text. In the best case I can also increase the size of the tapable area to for example 42px.

I already looked into flutter_linkify and linkify, but that's not what I want. I'm curious if there's already a package or even built into the flutter library.

Schug

Using pub.dev/packages/flutter_linkify is easier, look: https://mcmap.net/q/246270/-how-to-linkify-text-in-flutter – Napoleon

Linkify is something different as it does following: "Turns text URLs and emails into clickable inline links in text for Flutter." – Schug

Answer 1

import 'package:flutter/gestures.dart';

Use RichText with TextSpan and GestureRecognizer. With GestureRecognizer you can detect tap, double tap, long press and etc.

Widget build(BuildContext context) {
    TextStyle defaultStyle = TextStyle(color: Colors.grey, fontSize: 20.0);
    TextStyle linkStyle = TextStyle(color: Colors.blue);
    return RichText(
      text: TextSpan(
        style: defaultStyle,
        children: <TextSpan>[
          TextSpan(text: 'By clicking Sign Up, you agree to our '),
          TextSpan(
              text: 'Terms of Service',
              style: linkStyle,
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print('Terms of Service"');
                }),
          TextSpan(text: ' and that you have read our '),
          TextSpan(
              text: 'Privacy Policy',
              style: linkStyle,
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print('Privacy Policy"');
                }),
        ],
      ),
    );
  }

Battologize

Works great! Note that you'll need to import 'package:flutter/gestures.dart'; for this to work. – Ouellette

Can you please explain the .. notation, I haven't seen it before. – Immuno

.. notation a allows you to call a particular method, then return the original object on which the method is call, generally used when we want to call multiple methods on the same object in a cascade fashion – Sinker

I have a string fetching from database eg nice concept of help/support - https://support.google.com/firebase?authuser=0#topic=6399725 now tell me how an I convert this URL from this string as Link in Flutter? Thanks a lot. – Zandrazandt

richtext is not respecting text styles though, I use same TextStyle for TextSpan as for Text but they look different (textspan uses smaller font still) – Proteolysis

Answer 2

You can use RichText to merge a list of TextSpan into a single Text.

    return RichText(
      text: TextSpan(
        text: 'Hello ',
        style: DefaultTextStyle.of(context).style,
        children: <TextSpan>[
          TextSpan(
              text: 'world!',
              style: TextStyle(fontWeight: FontWeight.bold)),
          TextSpan(
              text: ' click here!',
              recognizer: TapGestureRecognizer()
                ..onTap = () => print('click')),
        ],
      ),
    );

Annettannetta

What do the two dots before onTap mean? – Desegregate

@Desegregate this is the Cascade notation - dart.dev/guides/language/language-tour#cascade-notation-. It helps you to make a chain of operations in the same object, as it returns an instance of the underlying object. So in this case we're implementing the onTap() method of the TapGestureRecognizer but still returning its instance to recognizer property from TextSpan – Annettannetta

Like a spread operator? – Desegregate

If you're talking about the JS spread operator, it's applied to iterables and it allows us the privilege to obtain a list of parameters from an array. So no, those are different things. – Annettannetta

I have a string fetching from database eg nice concept of help/support - https://support.google.com/firebase?authuser=0#topic=6399725 now tell me how an I convert this URL from this string as Link in Flutter? Thanks a lot. – Zandrazandt

Hey, @Zandrazandt I'm afraid I didn't understand your question, can you give me more context? – Annettannetta