title: Painting Stroked/Bordered Text on Canvas
body: <p>I'm trying to paint stroked text on a canvas. in my editor, I created the stroked text effect by stacking two text widegts:</p>
  <pre class="lang-dart prettyprint-override"><code>class TextDataView extends ElementView&lt;TextData&gt; {
  
    final String placeholderText;
  
    TextDataView(TextData data, {required this.placeholderText}) : super(data);
  
    Text buildText(BuildContext context) {
      return Text(
        data.text.isNotEmpty ? data.text : placeholderText,
        style: data.getTextStyle(),
        textAlign: data.textAlignment,
      );
    }
  
    @override
    Widget build(BuildContext context) {
      final text = buildText(context);
      return Stack(
        alignment: Alignment.center,
        children: [
          // for outline
          Text(
            text.data!,
            style: text.style!.copyWith(
              foreground: Paint()
                ..style = PaintingStyle.stroke
                ..strokeCap = StrokeCap.round
                ..strokeJoin = StrokeJoin.round
                ..strokeWidth = data.textStrokeSize
                ..color = data.textStrokeSize == 0
                    ? Colors.transparent
                    : data.textStrokeColor,
              color: null,
            ),
            maxLines: text.maxLines,
            overflow: text.overflow,
            semanticsLabel: text.semanticsLabel,
            softWrap: text.softWrap,
            strutStyle: text.strutStyle,
            textAlign: text.textAlign,
            textDirection: text.textDirection,
            textScaleFactor: text.textScaleFactor,
          ),
          // for display
          text,
        ],
      );
    }
  
  }
  </code></pre>
  <p>For output rendering, I can only paint the display text:</p>
  <pre class="lang-dart prettyprint-override"><code>
  extension TextDataToTextPainter on TextData {
    TextPainter composeText() {
      return TextPainter(
        textAlign: textAlignment,
        textDirection: textDirection,
        maxLines: maxLines,
        textScaleFactor: textScaleFactor,
        text: TextSpan(
          text: text,
          style: getTextStyle(),
        ),
      );
    }
  }
  
  
  class EditorTextPainter extends ElementPainter&lt;TransformData&lt;TextData&gt;&gt; {
    @override
    Future&lt;void&gt; draw(Canvas canvas, Size size, TransformData&lt;TextData&gt; data) {
      canvas.saveLayer(Offset.zero &amp; size, Paint());
  
      final text = data.data.composeText();
      final offset = data.offset.alongSize(size);
      final textSize = data.size.toActualSize(size);
  
      text.layout(maxWidth: textSize.width);
      text.paint(canvas, offset);
  
      canvas.rotate(data.angle);
      canvas.restore();
  
      return Future.value();
    }
  }
  
  </code></pre>
  <p>How can I also paint the stroke with <code>TextPainter</code>?</p>