CustomText.spans constructor

const CustomText.spans({
  1. Key? key,
  2. required List<InlineSpan> spans,
  3. required List<Definition> definitions,
  4. ParserOptions parserOptions = const ParserOptions(),
  5. TextStyle? style,
  6. TextStyle? matchStyle,
  7. TextStyle? tapStyle,
  8. TextStyle? hoverStyle,
  9. GestureCallback? onTap,
  10. GestureCallback? onLongPress,
  11. GestureCallback? onGesture,
  12. Duration? longPressDuration,
  13. bool preventBlocking = false,
  14. StrutStyle? strutStyle,
  15. TextAlign? textAlign,
  16. TextDirection? textDirection,
  17. Locale? locale,
  18. bool? softWrap,
  19. TextOverflow? overflow,
  20. TextScaler? textScaler,
  21. int? maxLines,
  22. String? semanticsLabel,
  23. TextWidthBasis? textWidthBasis,
  24. TextHeightBehavior? textHeightBehavior,
  25. Color? selectionColor,
})

Creates a text widget that decorates part of the provided InlineSpans and enables tap, long-press and/or hover gestures on them based on flexible definitions.

This constructor is useful if you already have styled spans and want to decorate them additionally.

CustomText.spans(
  style: const TextStyle(fontSize: 50.0),
  definitions: [
    TextDefinition(
      // WidgetSpan is matched by `\uFFFC` or `.` in a match pattern.
      matcher: ExactMatcher(const ['Flutter devs\uFFFC']),
      matchStyle: const TextStyle(color: Colors.blue),
      hoverStyle: TextStyle(color: Colors.blue.shade300),
      mouseCursor: SystemMouseCursors.forbidden,
    ),
  ],
  spans: [
    const TextSpan(text: 'Hi, '),
    const TextSpan(
      text: 'Flutter',
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
    const TextSpan(text: ' devs'),
    WidgetSpan(
      alignment: PlaceholderAlignment.middle,
      child: Builder(
        builder: (context) {
          // Text style is available also in WidgetSpan
          // via DefaultTextStyle.
          final style = DefaultTextStyle.of(context).style;
          return Icon(
            Icons.emoji_emotions,
            size: style.fontSize,
            color: style.color,
          );
        },
      ),
    ),
  ],
)

This example shows "Hi, Flutter devs" with an emoji at the end. The text consists of a list of InlineSpans, where "Flutter" is styled as bold and the emoji is defined by a WidgetSpan. CustomText used via the spans constructor cleverly handles InlineSpans like the above instead of plain text. This results in displaying "Flutter devs" and the emoji in blue, without losing the bold style of "Flutter" defined in the original span.

However, note that the style is lost in the string corresponding to definitions other than TextDefinition; the string returned by the shownText callback of SelectiveDefinition and the InlineSpan created by the builder function of SpanDefinition do not inherit the original style.

Also note that attributes except for style in the original TextSpans are removed.

Implementation

const CustomText.spans({
  super.key,
  required List<InlineSpan> this.spans,
  required this.definitions,
  this.parserOptions = const ParserOptions(),
  this.style,
  this.matchStyle,
  this.tapStyle,
  this.hoverStyle,
  this.onTap,
  this.onLongPress,
  this.onGesture,
  this.longPressDuration,
  this.preventBlocking = false,
  this.strutStyle,
  this.textAlign,
  this.textDirection,
  this.locale,
  this.softWrap,
  this.overflow,
  this.textScaler,
  this.maxLines,
  this.semanticsLabel,
  this.textWidthBasis,
  this.textHeightBehavior,
  this.selectionColor,
})  : text = null,
      preBuilder = null;