textflutterdartclickable

Make specific parts of a text clickable in flutter


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.

enter image description here

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.


Solution

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

    enter image description here