Flutter animation doesn't render

Viewed 182

This is an attempt to create a pulsing circle. It doesn't work.Also when I try to exit the page where it's on, it gives the error: " 'package:flutter/src/widgets/framework.dart': Failed assertion: line 5098 pos 14: '_dependents.isEmpty': is not true.". What could be wrong with this widget?

    import 'package:flutter/material.dart';
    import 'package:flutter/animation.dart';
    
    class BlinkingCircle extends StatefulWidget {
      BlinkingCircle({Key key, @required this.size}) : super(key: key);
      final size;
      @override
      _BlinkingCircleState createState() => _BlinkingCircleState();
    }
    
    class _BlinkingCircleState extends State<BlinkingCircle>
        with SingleTickerProviderStateMixin {
      Animation<double> animation;
      AnimationController controller;
    
      @override
      void initState() {
        super.initState();
        controller = AnimationController(
            vsync: this, duration: const Duration(microseconds: 5000));
        animation = Tween<double>(begin: 0, end: 20).animate(controller)
          ..addListener(() {
            setState(() {});
          });
        controller.forward();
      }
    
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.blue,
          width: animation.value,
          height: animation.value,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
          ),
        );
      }
    
      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }
    }
1 Answers

you need to move color: property inside Decoration

      width: animation.value,
      height: animation.value,
      decoration: BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
      ),
    );

also you need to change microseconds to milliseconds

Related