skip to Main Content

Is it possible to create a tooth chart like the one I found on codepen.io using Flutter? I attempted to use icons positioned side by side, but it’s not as flexible for reproducing the same image. The chart I found on codepen.io was constructed using CSS and HTML.

Here is the link to the tooth chart: https:// codepen.io/johnstuif/pen/JdOXWa

This is the image

2

Answers


  1. You can use CustomPaint to draw a path with given offsets.

    class Home extends StatelessWidget {
      const Home({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: CustomPaint(
          painter: Tpainter(),
        ));
      }
    }
    
    class Tpainter extends CustomPainter {
      @override
      void paint(Canvas canvas, Size size) {
        Paint p = Paint();
        p.color = Colors.grey;
        p.strokeWidth = 4;
        p.strokeJoin = StrokeJoin.round;
    
        canvas.drawRawPoints(PointMode.polygon, Float32List.fromList(t_32), p);
        canvas.drawRawPoints(PointMode.polygon, Float32List.fromList(t_31), p);
        ... 
    // or loop through List of teeth paths
    
      @override
      bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
    }
    
    List<double> t_32 = const [
      66.7,
      69.7,
      59,
      70.3,
      51,
      73.7,
      43.7,
      84.3,
      42.3,
      92,
      38.7,
      106,
      41,
      115.3,
      44.3,
      120.3,
      47.3,
      124,
      51.7,
      124.3,
      57.7,
      124,
      62.3,
      122.7,
      66.7,
      122.7,
      71,
      124.3,
      76.3,
      122.7,
      80.7,
      119.3,
      84.7,
      112.3,
      85.3,
      105,
      87.3,
      91.7,
      85,
      80,
      80.7,
      75,
      73.7,
      71.3
    ];
    
    List<double> t_31 = const [...];
    ...
    
    Login or Signup to reply.
  2. yes, you can
    just use combination widget stack, column and row

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search