Skip to content

Expose Skia's drawText and measureText in the dart:ui Canvas API #18656

@sir-boformer

Description

@sir-boformer

Edit: It seems like the text gradient bug that lead to this proposal was caused by a recent change in the Flutter engine, which will hopefully be fixed soon (see the discussion below). I think exposing the drawText method would still be nice for all the other reasons listed below.


Right now the only way to draw text in a canvas is the drawParagraph method. It allows you to draw single- and multi-line text with a max width, text ellipsis and inline formatting.

Before you can paint the text, you have to build a Paragraph object and call its layout method.

Internally, it uses Skia's drawTextBlob method.


While porting an existing Android/Web-Application to Flutter, what I often wanted to do is to draw a single line of text on a canvas. Often, I would also like to change the alignment of the text (centered, left right) relative to the offset coordinates, as well as measure the width of the text in advance. Also, the app that I am porting draws text filled with absolute positioned linear gradients.

In Android and the web, the main functions for canvas text drawing are drawText (Android) and fillText (Web).

Both of them are less powerful, but also easier to use. I'm not sure if they are also more optimized.

Both of them just draw a single line of text (or multiple lines with manual \n line breaks). Both of them handle the text align in the same way. Both share the same gradient drawing behavior.

Also, both APIs provide a measureText method, which is basically like Paragraph.width, but for a single line.

Most of the points above can be emulated with the drawParagraph method (absolute positioned gradients only with a lot of possibly inefficent extra code), but I would prefer a drawText method that does exactly the same thing as the other platforms.

Skia already provides drawText and measureText methods, they are just not exposed in Flutter.

Metadata

Metadata

Assignees

No one assigned

    Labels

    c: new featureNothing broken; request for a new capabilityengineflutter/engine related. See also e: labels.frameworkflutter/packages/flutter repository. See also f: labels.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions