You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
diplomatic-quarter/lib/pages/learning/progress_bar_widget.dart

51 lines
1.5 KiB
Dart

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),
),
),
],
),
);
}
}