In this post, you will learn how to make clickable text in Flutter. Many apps use clickable text in the signup/login form. After completing this tutorial, you can also make one like that.
- If you want to make a hyperlink, go to this example: Flutter HyperLink Text Example
- Clickable Container In Flutter
Let’s go then.
[sociallocker id=”2232″]clickabletext – source code[/sociallocker]
Contents
How To Make Text Clickable Using RichText Widget?
In this example, You will use the RichText widget. RichText…, just like the name it’s rich in features when compared to a Text widget.
Let’s check it out.
I have already discussed about clickable text in Flutter Notes App
- TextSpan used to show text inside RichText.
- Using recognizer property, we can make the text clickable.
- Cascade notation(..) allows to perform sequence of operations on same object, here TapGestureRecognizer.
- When the Login text clicked, onTap method gets called.
- Don’t forget to add this statement : import ‘package:flutter/gestures.dart’;
RichText(
text: TextSpan(children: [
TextSpan(
text: 'Already have account? ',
style: TextStyle(
color: Colors.black,
),
),
TextSpan(
text: 'Login',
style: TextStyle(
color: Colors.blue,
),
recognizer: TapGestureRecognizer()
..onTap = () {
print('Login Text Clicked');
}),
]),
),
The complete source code is given below.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Clickable Text Using RichText',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Clickable Text Using RichText'),
),
body: Center(
child: RichText(
text: TextSpan(children: [
TextSpan(
text: 'Already have account? ',
style: TextStyle(
color: Colors.black,
),
),
TextSpan(
text: 'Login',
style: TextStyle(
color: Colors.blue,
),
recognizer: TapGestureRecognizer()
..onTap = () {
print('Login Text Clicked');
}),
]),
),
),
),
);
}
}
Flutter Clickable Text Using InkWell Example
InkWell widget helps to listen for tap events. Wrapping with Text widget we can easily find out the tap events.
- When text gets clicked, onTap gets called.
InkWell(
onTap: () {
print('Text Clicked');
},
child: Text('Clickable Text Using InkWell'),
),
complete source code is given below.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Clickable Text Using InkWell',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Clickable Text Example'),
),
body: Center(
child: InkWell(
onTap: () {
print('Text Clicked');
},
child: Text('Clickable Text Using InkWell'),
),
),
),
);
}
}
Flutter Clickable Text Using GestureDetector
Just like InkWell, GestureDetector can also used to listen for tap events. So just wrap Text widget with GestureDetector.
- When the text tapped, GestureDetector’s onTap method gets called.
GestureDetector(
onTap: () {
print('Text Clicked');
},
child: Text('Clickable Text Using GestureDetector'),
),
Complete source code given below.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Clickable Text Using GestureDetector',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Clickable Text Example'),
),
body: Center(
child: GestureDetector(
onTap: () {
print('Text Clicked');
},
child: Text('Clickable Text Using GestureDetector'),
),
),
),
);
}
}
That’s all for now.
If you like this post, please share it with your family and friends. If you got any other ways, feel free to comment.
Thank you.
