[Flutter] 깜박이는 효과

설명

설명

child 위젯이 깜박이는 효과를 가지도록 하기 위해서 제작했습니다.
isBlinking은 bool 값으로 true로 설정되면 깜박이게 됩니다.
duration은 애니메이션이 적용되는 시간으로 기본값은 1초입니다.

part of '../../../my_lib.dart';

/// child 가 깜박이는 효과를 만드는 위젯
class Blinking extends StatefulWidget {
  final Widget child;
  final bool isBlinking;
  final Duration duration;

  const Blinking({
    required this.child,
    this.isBlinking = true,
    this.duration = const Duration(seconds: 1),
    Key? key,
  }) : super(key: key);

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

class _BlinkingState extends State<Blinking> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: widget.duration,
    )..repeat(reverse: true);
  }

  @override
  void didUpdateWidget(Blinking oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.isBlinking && !_controller.isAnimating) {
      _controller.repeat(reverse: true);
    } else if (!widget.isBlinking && _controller.isAnimating) {
      _controller.stop();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      child: widget.child,
      builder: (context, child) {
        return Opacity(
          opacity: widget.isBlinking ? (1.0 - _controller.value) : 1.0,
          child: child,
        );
      },
    );
  }
}

[Flutter] 깜박이는 효과

Table of contents

설명