How to locate list of widgets along the curve in Flutter?

Question

Please tell me, is it possible to locate list of widgets along the curve? Like on picture, Let's say teeth are widgets.

You can locate them in any way you want but the question is in what format do you have this `"curve"` presented? — Szymon Kowaliński, Feb 09 '21 at 19:16
What kind of object you have that you want to be used to generate flutter layout? — Szymon Kowaliński, Feb 09 '21 at 19:30
@Szymon Kowaliński Well, for example we have: List widgets = [a, b, c, d]; If we want to create row using this list, we can achieve it like this one: Row( children: [ ...widgets], ); Here widgets will be arranged in a straight line, but what if I want the widgets to be arranged in an arc. Is it possible in Flutter? Is there any widget for such purpose? I wouldn't like to use the stack. — GeorgeOblomov, Feb 10 '21 at 07:29

score 0 · Answer 1 · answered Feb 10 '21 at 11:44

If you don't want to use Stack, then you might try out the CustomPaint widget and drawing in flutter with paths. There's a tutorial to painting: https://medium.com/flutter-community/paths-in-flutter-a-visual-guide-6c906464dcd0

However, painting is a limited thing and if you have an actual widgets that need to be fully responsive and act as a widgets, you need to use Stack with Positioned. That's the only way to go.

Also, in this question about animating along the curve in flutter you can find some code examples that use both: painting and stack and even animate that. Possibly the most useful code from there is calculating the position of an object that you want to place along some curve:

Offset calculate(path, along) {
    PathMetrics pathMetrics = path.computeMetrics();
    PathMetric pathMetric = pathMetrics.elementAt(0);
    along = pathMetric.length * along;
    Tangent pos = pathMetric.getTangentForOffset(along);
    return pos.position;
  }

In above example you need to have some Path which is a representation of some curve. For example you can get one like this:

Path getPath(){
    Size size = Size(300,300);
    Path path = Path();
    path.moveTo(0, size.height / 2);
    path.quadraticBezierTo(size.width / 2, size.height, size.width, size.height / 2);
    return path;
  }

then you give this path and some along, which is number between 0 and 1, which represents beginning and ending of this curve and you give it to the calculate, which return and Offset, which you can use in your Positioned inside your Stack:

Positioned(
            top: calculate(path, along).dy,
            left: calculate(path, along).dx,
            child: ...

When you only want some shapes to be drawn on a screen then you can use simply painting with CustomPaint widget, but this objects won't be widgets

Thank you much for the help! – GeorgeOblomov Feb 10 '21 at 20:38 — GeorgeOblomov, Feb 10 '21 at 20:38

How to locate list of widgets along the curve in Flutter?

1 Answers1