Flutter AnimationController in StatelessWidget repaints always whole screen

Viewed 66

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?

enter image description here

0 Answers
Related