Text Support

[dnfield]

trafficstars

Basic text support is achievable:

• [x] Basic support for rendering text with a fill property (or, if text only has stroke property, treating the stroke as a fill)
• [x] Support the x, y (single value), dx and dy properties
• [x] Support nested tspans with various styles
• [x] Support font inheritence properties

These might be achievable as-is but not clear on their value here:

• [ ] Multi-value x/y lists - but is this really a desired functionality?
• [ ] The rotate property - really necessary though? Would likely require lots of canvas manipulation. Not easy to implement.

These would require engine level changes/patches:

• [ ] <textPath> support - Flutter only supports drawing text in a straight line today. Issue opened for that to discuss in flutter/flutter
• [x] Stroke text. (See https://github.com/flutter/engine/pull/5395)
• [x] Otherwise painted text. (see https://github.com/flutter/engine/pull/5395)
• [ ] Custom kerning - probably not a good idea here.

All of that said, it may be preferable to preprocess text into paths with another tool.

[dnfield]

x/y and dx/dy are very non-trivial to implement. I may revisit if inspiration hits (or if someone else wants to try they're welcome), but unless I see some need for it I'll likely focus on other areas.

I do still think textPath would be nice to have, but will require an update to Engine to achieve.

[Tyxz]

I know svg text is still under development, but I miss a point on your todo list: colored text. For my night theme I tried to change to color to the normal text color. The svg circle gets colored, but the text stays black.

SvgPicture.asset(
      S.of(context).asset_circle_text,
      color: Theme.of(context)
               .primaryTextTheme
               .display1
               .color,
)

Besides that, great work. I did not find a way to bend the text like that directly with Flutter, but thanks to you it looks very nice in the day theme.

[dnfield]

What happens if you do BlendMode.screen for the blending?

[Tyxz]

Sadly, still no difference. It could be unrelated to your library and due to the way my SVG is build. I created it with Illustrator and minified it with the svgcleaner app and the result looks like this:

<svg viewBox="0 0 1009.36 1009.36" xmlns="http://www.w3.org/2000/svg">
  <circle cx="504.68" cy="504.68" fill="none" r="425" stroke="#000" stroke-miterlimit="10" stroke-width="3"/>
  <g font-family="Roboto-Regular, Roboto">
    <text font-size="58.085369" transform="matrix(.48 -.88 .88 .48 96.51 302.45)">A</text>
    <text font-size="58.085369" transform="matrix(.55 -.84 .84 .55 114.47 269.91)">n</text>
    <text font-size="58.085369" transform="matrix(.59 -.81 .81 .59 131.81 243.62)">t</text>
    <text font-size="58.085369" transform="matrix(.62 -.78 .78 .62 142.87 228.61)">i</text>
    <text font-size="58.085369" transform="matrix(.66 -.75 .75 .66 151.13 217.81)">c</text>
    <text font-size="58.085369" transform="matrix(.69 -.72 .72 .69 170.93 195.34)">i</text>
    <text font-size="58.085369" transform="matrix(.73 -.69 .69 .73 180.15 185.35)">p</text>
    <text font-size="58.085369" transform="matrix(.77 -.64 .64 .77 203.33 163.4)">a</text>
    <text font-size="58.085369" transform="matrix(.8 -.59 .59 .8 227.4 143.74)">t</text>
    <text font-size="58.085369" transform="matrix(.83 -.56 .56 .83 242.4 132.73)">i</text>
    <text font-size="58.085369" transform="matrix(.85 -.52 .52 .85 253.46 124.85)">o</text>
    <text font-size="58.085369" transform="matrix(.89 -.46 .46 .89 281.14 107.92)">n</text>
  </g>
</svg>

EDIT: Interesting enough, if I add a fill="white" to the <g> element, and set the blend mode to screen, the text gets painted black, independend of the set color in the SvgPicture.

[mtc-jed]

Hi, just adding this to the pile of stuff : the font-family "Tahoma" isn't taken into account. Is this because Tahoma isn't supported ? If so, how can I add it to the font list ?

SVG code

  <svg viewBox="0 0 24 24">
    <circle
      cx="12"
      cy="12"
      r="11"
      style="fill:none;stroke:#757575;stroke-width:2"
    />
    <text
      x="5.9619141"
      y="18.561035"
      font-size="18px"
      font-weight="bold"
      font-family="Tahoma"
      fill="#757575"
    >1</text>
  </svg>

[dnfield]

The font family attribute is supported, but the font must be available on the user device to use it.