Flutter change MarkDown tappable text button style

Question

I am using the flutter_markdown package and it works fine, but I want to change the style of the tappable text button. I managed to change the default body style, but couldn't get it done for the tappable text. It is always blue.

This is how I achieved this:

MarkdownBody(
  data: e.text,
  onTapLink: (text, href, title) {
    getIt<AppService>().openUrl(
      href ?? '',
    );
  },
  styleSheet: MarkdownStyleSheet.fromTheme(
    ThemeData(
      textTheme: TextTheme(
        bodyMedium: context.textStyles.body1,
      ),
    ),
  ),
)

Anyone know how I can achieve that?

Answer 1

You will need to modify the a property of the MarkdownStyleSheet to get the customizable tappable text(link). Something like:

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

MarkdownBody(
  data: e.text,
  onTapLink: (text, href, title) {
    getIt<AppService>().openUrl(
      href ?? '',
    );
  },
  styleSheet: MarkdownStyleSheet.fromTheme(
    ThemeData(
      textTheme: TextTheme(
        bodyText2: context.textStyles.body1,
      ),
    ),
  ).copyWith(
    a: TextStyle(
      color: Colors.green, // <---- Change this as per your need.
      decoration: TextDecoration.underline,
    ),
  ),
)

In the snippet above, I've used copyWith to create a new instance of MarkdownStyleSheet with the customizable tappable text style.