Question 190459 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to create a blinking circle

I have a problem. I want to create a recording. How could I create a blinking red circle like the code below. What is the best option to create a simple blinking red circle?

Example created in SVG context

<svg>
  <circle fill="#ff0000" stroke="none" cx="60" cy="60" r="12">
    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
  </circle>
</svg>

I tried something like, but nothing happend. There is no red circle/ container shown.

 BlinkWidget(children: <Widget>[Container(color: Colors.red,)])


import 'package:flutter/cupertino.dart';

class BlinkWidget extends StatefulWidget {
  final List<Widget> children;
  final int interval;

  const BlinkWidget({required this.children, this.interval = 500, Key? key}) : super(key: key);

  @override
  _BlinkWidgetState createState() => _BlinkWidgetState();
}

class _BlinkWidgetState extends State<BlinkWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  int _currentWidget = 0;

  @override
  initState() {
    super.initState();

    _controller = AnimationController(
        duration: Duration(milliseconds: widget.interval),
        vsync: this
    );

    _controller.addStatusListener((status) {
      if(status == AnimationStatus.completed) {
        setState(() {
          if(++_currentWidget == widget.children.length) {
            _currentWidget = 0;
          }
        });

        _controller.forward(from: 0.0);
      }
    });

    _controller.forward();
  }

  @override
  dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: widget.children[_currentWidget],
    );
  }
}
Tags:

2

Answers


  1. 0

    Here is a widget that adds the blinking animation to any widget passed to it:

    class BlinkingWidget extends StatefulWidget {
  final Widget child;
  final Duration? duration;

  const BlinkingWidget({
    super.key,
    required this.child,
    this.duration,
  });

  @override
  State<BlinkingWidget> createState() => _BlinkingWidgetState();
}

class _BlinkingWidgetState extends State<BlinkingWidget>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  initState() {
    super.initState();

    _controller = AnimationController(
      duration: widget.duration ?? const Duration(milliseconds: 1000),
      vsync: this,
    );

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });

    _controller.forward();
  }

  @override
  dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => AnimatedBuilder(
        animation: _controller,
        builder: (context, child) => Opacity(
          opacity: _controller.value,
          child: widget.child,
        ),
        child: widget.child,
      );
}

    You can call the BlinkingWidget passing the widget you want, in your case a red circle:

    class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Center(
          child: BlinkingWidget(
            child: Container(
              height: 50,
              width: 50,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.red,
              ),
            ),
          ),
        ),
      );
}

    By having a widget that only takes care of adding the blinking animation, you can reuse it whenever and wherever you want, with different widgets as well.

    Login or Signup to reply.
  2. 0

    by using this plug in you can do the same.

    flutter_animate

    Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.red),
height: 50,
width: 50,
).animate(delay: 100.ms,
           onPlay: (controller) =>
           controller.repeat(reverse: false),
            ).fade(duration: 800.ms)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search