scrolling ribbon

main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

double x = 100;
double y = 200;
double X_Position = 0.00;
// ignore: non_constant_identifier_names
double Y_Position = 0.00;

class _MyHomePageState extends State<MyHomePage> {
  final key = GlobalKey();
  // ignore: non_constant_identifier_names

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(X_Position.toString()),
      ),
      body: Stack(
        children: [
          GestureDetector(
            onPanStart: (details) {
              Offset position = details.localPosition;
              setState(() {
                X_Position = position.dx;
                Y_Position = position.dy;
              });
            },
            onPanUpdate: (details) {
              Offset position = details.localPosition;
              setState(() {
                X_Position = position.dx;
                Y_Position = position.dy;
                print(X_Position);
                print(Y_Position);
              });
            },
            child: Container(
              key: key,
              width: 500,
              height: 100,
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.black87,
                  width: 2,
                ),
              ),
              child: LayoutBuilder(
                // Inner yellow container
                builder: (_, constraints) => Container(
                  width: constraints.widthConstraints().maxWidth,
                  height: constraints.heightConstraints().maxHeight,
                  color: Colors.green[800],
                  child: CustomPaint(painter: FaceOutlinePainter()),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class FaceOutlinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: draw something with canvas
    final paint = Paint();
    paint.style = PaintingStyle.stroke;
    paint.strokeWidth = 2.0;
    paint.color = Colors.white70;
    var gridSize = X_Position/10;
    var step = size.width/gridSize;
    while(gridSize-->0){
      int offset = gridSize.floor() % 5 == 0 ? 20 : 10;
      canvas.drawLine(
        Offset(step * gridSize, size.height),
        Offset(step * gridSize, size.height-offset),
        paint,
      );
    }

    canvas.drawLine(
      Offset(X_Position, size.height / 2),
      Offset(Y_Position, size.height / 2),
      paint,
    );
  }

  @override
  bool shouldRepaint(FaceOutlinePainter oldDelegate) => false;
}