import 'package:flutter/material.dart'; class CustomProgressBar extends StatelessWidget { final double playedPercentage; // value between 0.0 and 1.0 final double bufferedPercentage; // value between 0.0 and 1.0 final Color backgroundColor; final Color bufferedColor; final Color playedColor; const CustomProgressBar({ Key? key, required this.playedPercentage, required this.bufferedPercentage, this.backgroundColor = const Color(0xFFD9D9D9), this.bufferedColor = Colors.black12, this.playedColor = const Color(0xFF359846), }) : super(key: key); @override Widget build(BuildContext context) { return Container( width: 55, height: 4, decoration: BoxDecoration( color: backgroundColor, borderRadius: BorderRadius.circular(2), ), child: Stack( children: [ // Buffered bar Container( width: 55 * bufferedPercentage.clamp(0.0, 1.0), // Buffered width as a percentage of 55 decoration: BoxDecoration( color: bufferedColor, borderRadius: BorderRadius.circular(2), ), ), // Played bar Container( width: 55 * playedPercentage.clamp(0.0, 1.0), // Played width as a percentage of 55 decoration: BoxDecoration( color: playedColor, borderRadius: BorderRadius.circular(2), ), ), ], ), ); } }