flutter_markdown custom widget always on its own line

Question

I'm using the flutter markdown package made by the flutter team here https://pub.dev/packages/flutter_markdown. I've created my own MarkdownElementBuilder based on their examples that inserts my own custom widget into the markdown and it looks like this:

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:outlit_app/constants/color_theme.dart';
import 'package:outlit_app/constants/dimension.dart';
import 'package:outlit_app/models/models.dart';
import 'package:markdown/markdown.dart' as md;

class DefinitionBuilder extends MarkdownElementBuilder {
  final List<Definition> definitions;

  DefinitionBuilder(this.definitions) : super();

  @override
  Widget visitElementAfter(md.Element element, TextStyle preferredStyle) {
    final String textContent = element.textContent;

    Definition definition = definitions.firstWhere(
      (def) => textContent.toLowerCase().contains(def.word.toLowerCase()),
      orElse: () =>
          Definition(word: 'nothing found for $textContent', definition: ''),
    );

    return Tooltip(
      margin: EdgeInsets.all(Dimensions.MARGIN_SIZE_EXTRA_LARGE),
      padding: EdgeInsets.all(Dimensions.PADDING_SIZE_DEFAULT),
      decoration: BoxDecoration(
        color: GetColor.gradientPurple,
        borderRadius: BorderRadius.circular(8),
      ),
      verticalOffset: -10,
      triggerMode: TooltipTriggerMode.tap,
      message: definition.definition.trim(),
      child: Text(
        textContent.trim(),
        style: TextStyle(
          color: GetColor.primaryColor,
          fontSize: Dimensions.FONT_SIZE_OVER_LARGE,
        ),
      ),
    );
  }
}

class DefinitionSyntax extends md.InlineSyntax {
  static final String AST_SYMBOL = 'def';
  DefinitionSyntax() : super(_pattern);

  static const String _pattern = r'{{(.*)}}';

  @override
  bool onMatch(md.InlineParser parser, Match match) {
    parser.addNode(md.Element.text(AST_SYMBOL, match[1]));
    return true;
  }
}

It works well but the widget is always on it's own seperate line as opposed to being inline with the rest of the text. If I return a simple text widget I still get the same thing.

Any tips in the right direction would be great :)

Answer 1

I got it work although not perfect because the leading distribution is a little off with the text of the tooltip but the widget that gets embedded now looks like this:

return RichText(
      text: TextSpan(
        children: [
          WidgetSpan(
              child: Container(
            child: Tooltip(
              margin: EdgeInsets.all(Dimensions.MARGIN_SIZE_EXTRA_LARGE),
              padding: EdgeInsets.all(Dimensions.PADDING_SIZE_DEFAULT),
              decoration: BoxDecoration(
                color: GetColor.gradientPurple,
                borderRadius: BorderRadius.circular(8),
              ),
              verticalOffset: -10,
              triggerMode: TooltipTriggerMode.tap,
              message: definition.definition.trim(),
              child: Text(
                textContent.trim(),
                style: TextStyle(
                  color: GetColor.primaryColor,
                  fontSize: Dimensions.FONT_SIZE_OVER_LARGE,
                  leadingDistribution: TextLeadingDistribution.even,
                  height: 1,
                ),
              ),
            ),
          ))
        ],
      ),
    );