Make specific parts of a text clickable in flutter

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.

Using https://pub.dev/packages/flutter_linkify is easier, look: https://stackoverflow.com/a/52395715/4683601 — Ely Dantas, Nov 19 '20 at 19:18
Linkify is something different as it does following: "Turns text URLs and emails into clickable inline links in text for Flutter." — julian.a, Nov 20 '20 at 20:45

score 208 · Accepted Answer · answered Sep 28 '19 at 11:35

208

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"');
                }),
        ],
      ),
    );
  }

answered Sep 28 '19 at 11:35

Kirill Matrosov

5,564
4
28
39

13

Works great! Note that you'll need to `import 'package:flutter/gestures.dart';` for this to work. – engelen Sep 12 '20 at 15:23
1

Can you please explain the `..` notation, I haven't seen it before. – Mrak Vladar Jan 16 '21 at 11:01
5

`..` 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 – Piyush Vishwakarma Jan 19 '21 at 12:46
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. – Kamlesh Aug 14 '21 at 10:31
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) – Kristi Jorgji Jun 22 '23 at 11:08

score 32 · Answer 2 · answered Sep 28 '19 at 11:35

32

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')),
        ],
      ),
    );

answered Sep 28 '19 at 11:35

haroldolivieri

2,173
18
29

2

What do the two dots before onTap mean? – user3808307 Oct 12 '20 at 17:46
1

@user3808307 this is the Cascade notation - https://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` – haroldolivieri Oct 26 '20 at 11:00
Like a spread operator? – user3808307 Oct 26 '20 at 14:54
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. – haroldolivieri Oct 27 '20 at 10:58
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. – Kamlesh Aug 14 '21 at 10:31
Hey, @Kamlesh I'm afraid I didn't understand your question, can you give me more context? – haroldolivieri Aug 20 '21 at 08:01

Make specific parts of a text clickable in flutter

2 Answers2

Linked