Very useful code, thank you!

I'm currently porting an Android/java app to flutter; I have some needs/suggestions, that I will have to implement and may integrate into this project (if you're OK with that):

1. being able to write text anti-clockwise
2. calling the code from any CustomPainter (which may mean moving the code into a static function or tool class)
3. adding some length() tools - I have no control on the text, which means I need to check if it fits in this circle (if not, I use a smaller font size for instance)

I've just developed a very useful feature: a double interLetterSpacing = 0 parameter in the ArcTextPainter constructor.

The idea behind that is:

1. I've got a text to display around a circle
2. I compute the "final angle", let's say it's pi
3. If I display the text as is, it's going to be displayed on a pi angle, fair enough
4. But I would like the text to stretch to the whole 2*pi angle
5. The idea is to rotate an extra angle for each letter - hence the extra parameter in the constructor

Computing the extra angle is my own business so far (something like (2*pi - getFinalAngle()) / text.length), though it could also be included in the library (like a bool autoStretch = false parameter in the constructor). But the thing absolutely needed is the support of this double interLetterSpacing = 0 parameter in the ArcTextPainter constructor.

What do you think about that?

Added PainterDelegate that can be used to customize the way the text will be drawn.

With the delegate you can control when the text will be drawn with painter.paint(canvas, size), so you can add a decoration before and after the text:

This layout can be achieved with the following delegate:

void delegate(Canvas canvas, Size size, ArcTextPainter painter) {
  final rect = Rect.fromLTWH(0, 0, size.width, size.height);

  canvas.drawArc(
    rect,
    painter.startAngle,
    painter.sweepAngle,
    false,
    _decorationPaint,
  );

  painter.paint(canvas, size);

  canvas.drawArc(
    rect,
    painter.finalAngle + radians(10),
    2 * pi - painter.sweepAngle - radians(20),
    false,
    _backgroundPaint,
  );
}

It introduces some breaking changes:

• getFinalAngle is changed to sweepAngle getter, as it actually returns the total angle, not the absolute final angle.
• paint now accepts Size instead of Offset and offset is always in the center of this Size rectangle. It makes delegate simpler.

There's one thing I don't like here: using drawArc you still have to add -pi / 2 for the angles, as drawArc 0 angle is at point (1; 0). For me, 0 angle should start at point (0; 1), so it was implemented like this in the library. I'm not sure whether it makes sense to introduce another breaking change and make library's 0 angle aligned with drawArc.

For the record, during the development of my app I've just found out that I was better off with a new Placement value: middle. And I also use the following parameters in order to have a very good top/bottom match with the texts on both Direction at the same time:

TextStyle(
  textBaseline: TextBaseline.ideographic,
  height: 1,
)

That's not 100% related, but I've also built classes in order to have flutter_arc_text work not only on Canvas, but also on html.CanvasRenderingContext2D. Not sure if many people would be interested by that.

I would like to have a background container along with the arc text which have rounded corners. And with a gradient bg color. For the time being it seems impossible to do.

However this is very important to use over images since image might be same color with the text so we need something behind the text.

What do you think @ookami-kb @monsieurtanuki ?

The library 'package:flutter_arc_text/flutter_arc_text.dart' is legacy, and should not be imported into a null safe library.
Try migrating the imported library.

Error: This project cannot run with sound null safety, because one or more project dependencies do not
support null safety:

- flutter_arc_text

dependencies:
  flutter_arc_text: ^0.3.2

Trying to add some texts to an arc, I came across your code. I wanted the text to be in the center of the arc though, so I added startAngleAlignment attribute which can be .start, .center or .end. By default, it'll be .start so it won't break the code.

Cheers!

I am using flutter_map library to draw polylines, everything working as excepted until I want to draw some text alongside the polyline. after several hours of searching over google, StackOverflow, etc.., I could not find a way to let the text rotate with the polyline, then I find your article on medium I find it a good start point, I tried to draw without rotation equation, just plain text here are the results :

Now I just need a way to let the text rotate with the polyline. I appreciate your work.

The current rendering based on runes has issues when rendering complex emojis (composed out of multiple unicode chars, e.g. 👨🏻‍💻 breaks down to several runes 👨 🏻 💻, see emojipedia )

When using grapheme clusters (provided by characters package) this can be solved since they split text in visible / user-perceived characters.

Note: 8cf0f1d is based on the previous version of arc_text (pre null-safety) for a potential back-port

I added a clockwise parameter for the direction of the text.

I simplified the code in the process: I had trouble understanding the concept of canvas rotation when not centered on the canvas center. Now there's only an initial canvas translation to its center, and then multiple rotations (all based on the canvas center).