Camera for web

camera.dart

import 'package:flutter/material.dart';

class RankProgressBar extends StatelessWidget {
  final double progress; // From 0.0 → 1.0
  final int currentRank; // e.g., 7
  final List<int> milestones; // e.g., [7, 6, 5, 4, 3, 2, 1]

  const RankProgressBar({
    super.key,
    required this.progress,
    required this.currentRank,
    required this.milestones,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: const Color(0xff5b4ae0),
        borderRadius: BorderRadius.circular(20),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "Progress to Rank #6",
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),

          const SizedBox(height: 20),

          /// PROGRESS BAR
          Stack(
            children: [
              Container(
                height: 10,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  gradient: const LinearGradient(
                    colors: [
                      Color(0xfff4c95d),
                      Color(0xffff7f50),
                    ],
                  ),
                ),
              ),

              /// Filled part
              Container(
                height: 10,
                width: MediaQuery.of(context).size.width * progress,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.orangeAccent,
                ),
              ),
            ],
          ),

          const SizedBox(height: 20),

          /// MILESTONE CIRCLES
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: milestones.map((rank) {
              final isCurrent = rank == currentRank;
              return Column(
                children: [
                  Container(
                    width: isCurrent ? 30 : 20,
                    height: isCurrent ? 30 : 20,
                    decoration: BoxDecoration(
                      color: isCurrent ? Colors.orange : Colors.white24,
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.white, width: 2),
                    ),
                    child: Center(
                      child: Text(
                        rank.toString(),
                        style: TextStyle(
                          color: isCurrent ? Colors.white : Colors.white70,
                          fontWeight: FontWeight.bold,
                          fontSize: isCurrent ? 14 : 12,
                        ),
                      ),
                    ),
                  ),
                ],
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}

https://youtube.com/shorts/OlfTH7Qahl0?si=T7KYkvcx2O_jljFC