플러터(Flutter)를 사용하여 LinearLoader를 만들었지만, 애니메이션이 언제 시작되고 끝나는지 확인하고 싶을 때가 있습니다. 이 게시물에서는 LinearLoader의 애니메이션 진행 상태를 확인하는 방법에 대해 설명하겠습니다.

1. AnimationController 사용

LinearLoader의 애니메이션 상태를 확인하려면 AnimationController를 사용해야 합니다. 이를 통해 애니메이션의 진행률을 확인할 수 있습니다.

AnimationController _controller;
bool isLoading = false;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    vsync: this,
    duration: Duration(seconds: 2),
  );
  _controller.addStatusListener((status) {
    if (status == AnimationStatus.forward) {
      setState(() {
        isLoading = true;
      });
    } else if (status == AnimationStatus.completed) {
      setState(() {
        isLoading = false;
      });
    }
  });
}

위의 예제에서는 AnimationController를 사용하여 LinearLoader의 애니메이션 진행 상태를 확인하고 있습니다. _controller의 addStatusListener를 통해 애니메이션 상태가 변경될 때마다 상태를 확인하고, 그에 따른 동작을 수행하도록 설정했습니다.

이제 isLoading 변수를 통해 애니메이션이 현재 진행 중인지 확인할 수 있습니다.

2. onTap 이벤트에 따라 애니메이션 시작 및 종료

LinearLoader를 터치했을 때 애니메이션이 시작하고, 다시 한 번 터치했을 때 애니메이션이 종료되도록 설정할 수 있습니다.

GestureDetector(
  onTap: () {
    if (_controller.isCompleted || _controller.status == AnimationStatus.dismissed) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
  },
  child: LinearLoader(),
)

위의 예제와 같이 GestureDetector를 사용하여 터치 이벤트를 감지하고, 해당 이벤트에 따라 AnimationController를 조작하여 애니메이션을 시작하거나 종료하도록 설정하는 방법입니다.

결론

위의 방법들을 통해 플러터에서 LinearLoader의 애니메이션 진행 상태를 확인하고 조작하는 방법에 대해 알아보았습니다. AnimationController를 사용하여 애니메이션의 상태를 확인하고, 이를 통해 사용자 상호 작용에 따라 애니메이션을 시작하거나 종료할 수 있습니다.

이러한 기능을 통해 사용자 경험을 더 향상시킬 수 있고, 앱의 상태 변화를 시각적으로 표현할 수 있습니다.

참조:
Flutter AnimationController class