[flutter] 플러터 shimmer를 이용한 타이머 버튼 애니메이션 구현

11 Dec 2023

flutter

플러터(Flutter)를 사용하여 위젯에 shimmer 효과를 추가하는 방법에 대해 이전에 설명했습니다. 이번 게시물에서는 shimmer 효과를 적용하여 타이머 버튼을 만들어보겠습니다. 타이머 버튼은 사용자가 버튼을 탭할 때마다 애니메이션이 트리거되어 보이는 일정 시간 동안 작동하는 버튼입니다.

1. Shimmer 패키지 설치

먼저, pubspec.yaml 파일에 shimmer 패키지를 추가합니다.

dependencies:
  shimmer: ^2.0.0

그런 다음, 터미널을 열고 다음 명령어를 실행하여 패키지를 가져옵니다.

flutter pub get

2. 타이머 버튼 위젯 만들기

타이머 버튼 위젯을 만들기 전에 shimmer 패키지를 가져옵니다.

import 'package:shimmer/shimmer.dart';

그런 다음, 다음과 같이 StatefulWidget을 확장하고 isTimerActive라는 상태를 통해 타이머가 활성화된 상태를 저장할 수 있는 타이머 버튼 위젯을 작성합니다.

class TimerButtonWidget extends StatefulWidget {
  @override
  _TimerButtonWidgetState createState() => _TimerButtonWidgetState();
}

class _TimerButtonWidgetState extends State<TimerButtonWidget> {
  bool _isTimerActive = false;

  @override
  Widget build(BuildContext context) {
    return _isTimerActive ? _buildShimmerButton() : _buildButton();
  }

  Widget _buildShimmerButton() {
    return Shimmer.fromColors(
      child: ElevatedButton(
        onPressed: () {},
        child: Text('타이머 동작 중'),
      ),
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
    );
  }

  Widget _buildButton() {
    return ElevatedButton(
      onPressed: () {
        setState(() {
          _isTimerActive = true;
          // 여기에 타이머 동작 코드 추가
        });
      },
      child: Text('타이머 시작'),
    );
  }
}

위 코드에서는 _isTimerActive 상태를 사용하여 활성화된 상태에 따라 shimmer 효과가 적용된 버튼 또는 일반 버튼을 반환합니다. 또한, 타이머 버튼을 누를 때마다 _isTimerActive의 값을 변경하여 shimmer 효과가 트리거될 수 있도록 합니다.

3. 결과 확인

위와 같이 코드를 작성하면 타이머 버튼을 만들 수 있습니다. 사용자가 버튼을 누를 때마다 shimmer 효과가 적용된 버튼이 나타나고 일정 시간이 지나면 타이머가 해제됩니다.

이렇게 하면 플러터로 shimmer 효과를 이용하여 타이머 버튼을 애니메이션으로 구현할 수 있습니다.