代码之家 › 专栏 › 技术社区 › Test

如何创建一个闪烁的圆圈

dart flutter

Test · 技术社区 · 1 年前

我有个问题。我想创建一个录音。我怎么能像下面的代码一样创建一个闪烁的红色圆圈呢。创建一个简单的闪烁红色圆圈的最佳选项是什么?

示例创建于 SVG 上下文

<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>

我试过类似的方法,但什么也没发生。没有显示红色圆圈/容器。

 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],
    );
  }
}

0 回复 | 直到 1 年前

car_tor 1 年前

这里有一个小部件,它将闪烁的动画添加到传递给它的任何小部件中:

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,
      );
}

您可以调用BlinkingWidget传递您想要的小部件,在您的情况下是一个红色圆圈:

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,
              ),
            ),
          ),
        ),
      );
}

通过拥有一个只负责添加闪烁动画的小部件,您可以随时随地重用它,还可以使用不同的小部件。

magesh magi 1 年前

通过使用这个插件,你也可以做同样的事情。

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)