3 Ways To Make Clickable Text In Flutter

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

Let’s go then.

• How To Install Flutter & Create Flutter Project?
• 7 Flutter Commands You Must Know

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

• How To Remove Debug Banner In Flutter?
• How To Center AppBar Title In Flutter?

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.

RichText Widget Docs