I have built a horizontal progress animation widget which I'm using in a StatelessWidget with a Scaffold. The widget does not change the height and width while animating so I have no idea why the whole screen is always repainting. Here is my code:
class TrainingProgress extends StatefulWidget {
const TrainingProgress({
Key? key,
}) : super(key: key);
@override
State<TrainingProgress> createState() => _TrainingProgressState();
}
class _TrainingProgressState extends State<TrainingProgress>
with SingleTickerProviderStateMixin {
AnimationController? _animController;
@override
void initState() {
super.initState();
_animController =
AnimationController(duration: const Duration(seconds: 4), vsync: this)
..repeat();
}
@override
void dispose() {
_animController?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Row(
children: provider.exercises
.map(
(e) => AnimatedBar(
animController: _animController!,
exercise: e,
),
)
.toList(),
);
}
}
class AnimatedBar extends StatelessWidget {
final AnimationController animController;
final TrainingPlanExercise exercise;
const AnimatedBar({
Key? key,
required this.animController,
required this.exercise,
this.isTrackingScreen = false,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Flexible(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 1.5),
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: <Widget>[
_buildContainer(
context: context,
width: double.infinity,
),
exercise.isActive()
? AnimatedBuilder(
animation: animController,
builder: (context, child) {
return _buildContainer(
context: context,
width: constraints.maxWidth * animController.value,
);
},
)
: const SizedBox.shrink(),
],
);
},
),
),
);
}
Column _buildContainer({
required BuildContext context,
required double width,
}) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 5.0,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(3.0),
),
),
],
);
}
}
Does someone have an idea why the whole parent widget is repainting when using the "TrainingProgress" widget?
