Make specific parts of a text clickable in flutter
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')),
],
),
);
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"');
}),
],
),
);
}