Rotating Dial

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'dart:math' as math;

class Pawned extends StatefulWidget {
  const Pawned({super.key});

  @override
  State<Pawned> createState() => _PawnedState();
}

class _PawnedState extends State<Pawned> {
  double outerDialAngle = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Combination Dial'),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            // Outer Dial
            GestureDetector(
              onPanUpdate: (details) {
                setState(() {
                  outerDialAngle += details.primaryDelta ?? 0.0;
                });
              },
              child: Transform.rotate(
                angle: math.pi * outerDialAngle / 180.0,
                child: SvgPicture.asset(
                  'asset/outer_dial.svg', // Replace with your SVG image path
                ),
              ),
            ),

            // Progress Dial
            SizedBox(
              width: 282,
              height: 282,
              child: CircularProgressIndicator(
                value: outerDialAngle % 360 / 360,
                backgroundColor: Colors.grey,
                valueColor: const AlwaysStoppedAnimation<Color>(Colors.green),
              ),
            ),

            // Inner Circle
            Container(
              width: 192,
              height: 192,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.green,
              ),
              child: Center(
                child: Text(
                  calculateNumber(outerDialAngle),
                  style: const TextStyle(fontSize: 24),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  String calculateNumber(double angle) {
    // Calculate the number based on the angle
    int number = ((angle % 360) / 18).round() + 1;
    return number.toString();
  }
}