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.