Flutter TextSpan OnClick

Introduction

Flutter is a cross-platform framework developed by Google for building beautiful and fast user interfaces. One of its powerful features is the ability to handle user interactions and events with ease. In this guide, we will focus on using TextSpan's onTap property to create interactive and clickable text in Flutter.

TextSpan

TextSpan is a class in Flutter that represents a fragment of styled text within a Paragraph. It allows you to apply different styles to different parts of a text. TextSpan is commonly used in combination with RichText widget to display formatted and styled text.

Code Example

Here is an example of using TextSpan with RichText widget to create clickable text:

RichText(
  text: TextSpan(
    text: 'Click ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'here',
        style: TextStyle(
          decoration: TextDecoration.underline,
          color: Colors.blue,
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // Action to perform when text is clicked
          },
      ),
      TextSpan(text: ' to perform an action.'),
    ],
  ),
);

In the above code snippet, we create a RichText widget with a TextSpan as its text property. The TextSpan has two child TextSpan widgets - one for the clickable text and another for the remaining text.

The clickable text is styled with an underline and blue color using the TextStyle property. We also attach a TapGestureRecognizer to the recognizer property of the clickable TextSpan. This recognizer listens for tap gestures and triggers the specified action when the text is clicked.

Markdown Code Snippet

```dart
RichText(
  text: TextSpan(
    text: 'Click ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'here',
        style: TextStyle(
          decoration: TextDecoration.underline,
          color: Colors.blue,
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // Action to perform when text is clicked
          },
      ),
      TextSpan(text: ' to perform an action.'),
    ],
  ),
);

## Conclusion
Using `TextSpan` with `RichText` widget in Flutter provides a straightforward way to create interactive and clickable text. It gives developers the flexibility to customize the appearance and behavior of the clickable text while keeping the code clean and maintainable.