I tried to create an animated progressbar where the progress is filling up animatedly and also it changes it's color depending on the final value of the progress. The first part is working properly, but I can't figure out what is wrong with the color animation. What am I missing?
I used flutter_rounded_progress_bar for displaying the progress bar.
import 'package:flutter/material.dart';
import 'package:flutter_rounded_progress_bar/flutter_rounded_progress_bar.dart';
import 'package:flutter_rounded_progress_bar/rounded_progress_bar_style.dart';
class MyLinearProgressIndicator extends StatefulWidget {
final double currentProgress;
final double height;
final Color foregroundColor;
final int duration = 500;
MyLinearProgressIndicator({
this.currentProgress,
this.height = 5,
this.foregroundColor = const Color(0xFFde8405)});
@override
_LinearProgressIndicatorState createState() =>
_LinearProgressIndicatorState();
}
class _LinearProgressIndicatorState extends State<MyLinearProgressIndicator> with
SingleTickerProviderStateMixin {
AnimationController progressController;
Animation<double> animation;
Animation<Color> colorAnimation;
CurvedAnimation curve;
@override
void initState() {
super.initState();
progressController = AnimationController(vsync: this, duration: Duration(milliseconds: widget.duration));
curve = CurvedAnimation(parent: progressController, curve: Curves.ease);
animation =
Tween<double>(begin: 0, end: widget.currentProgress).animate(curve)
..addListener(() {
setState(() {});
});
Color endColor;
if (widget.currentProgress <= 30) {
endColor = const Color(0xFFFF0000);
} else if (widget.currentProgress <= 50) {
endColor = const Color(0xFF00FF00);
} else {
endColor =const Color(0xFF0000FF);
}
colorAnimation =
ColorTween(begin: widget.foregroundColor, end: endColor).animate(curve)
..addListener(() {
setState(() {});
});
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
progressController.forward();
});
}
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Text("${widget.currentProgress.floor()}%",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
color: Color(0xFF333333))),
),
Container(
height: widget.height,
width: 100,
child: RoundedProgressBar(
milliseconds: widget.duration,
height: widget.height,
style: RoundedProgressBarStyle(
borderWidth: 0,
widthShadow: 0,
colorProgress: colorAnimation.value,
backgroundProgress: Color(0xFFEBEBEB)),
percent: animation.value,
)),
],
);
}
@override
void dispose() {
progressController.dispose();
super.dispose();
}
}
User contributions licensed under CC BY-SA 3.0