플러터에서 애니메이션 카운트다운 구현하기: slide_countdown 패키지 사용법 가이드

 

플러터 앱에서 매끄러운 애니메이션 효과와 함께 카운트다운 기능을 구현할 수 있도록 도와주는 slide_countdown 패키지에 대해 자세히 알아보겠습니다.

1. slide_countdown 패키지 소개

slide_countdown은 플러터 앱에서 다양한 애니메이션 효과를 가진 매력적인 카운트다운 타이머를 쉽게 만들 수 있도록 하는 인기 있는 패키지입니다.

2. 설치 및 사용 방법

2.1 패키지 설치

 

1. pubspec.yaml 파일에 다음 코드를 추가합니다.

dependencies:
  slide_countdown: ^3.1.2

 

2. flutter pub get 명령어를 실행하여 패키지를 설치합니다.

 

2.2 사용 방법

 

1. 사용하려는 Dart 파일에 import 'package:slide_countdown/slide_countdown.dart'; 코드를 추가합니다.

2. SlideCountdown 위젯을 사용하여 카운트다운 타이머를 생성합니다.

import 'package:slide_countdown/slide_countdown.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SlideCountdown(
            duration: Duration(seconds: 60),
            color: Colors.blue,
            onDone: () {
              print('카운트다운 종료!');
            },
          ),
        ),
      ),
    );
  }
}

 

3. 주요 옵션

• duration: 카운트다운 시간 (Duration 타입, 필수)
• color: 슬라이드 색상 (Color 타입, 기본값: Colors.blue)
• borderWidth: 슬라이드 테두리 너비 (double 타입, 기본값: 4.0)
• size: 슬라이드 크기 (double 타입, 기본값: 100.0)
• padding: 슬라이드 내용 패딩 (EdgeInsets 타입, 기본값: EdgeInsets.all(8.0))
• decoration: 슬라이드 위젯 데코레이션 (BoxDecoration 타입, 기본값: BoxDecoration())
• slideChild: 슬라이드 안에 표시될 위젯 (Widget 타입, 기본값: Text(''))
• slideTextBuilder: 슬라이드 텍스트 구성 함수 (SlideCountdownTextBuilder 타입, 기본값: (remainingTime) => remainingTime.toString())
• onDone: 카운트다운 종료 시 실행되는 함수 (VoidCallback 타입)
• borderRadius: 슬라이드 모서리 곡률 (BorderRadius 타입, 기본값: BorderRadius.circular(20.0))
• slideDirection: 슬라이드 방향 (SlideDirection 타입, 기본값: SlideDirection.TOP_TO_BOTTOM)
• enableInfiniteAnimation: 무한 반복 애니메이션 여부 (bool 타입, 기본값: false)
• showRemainingTime: 남은 시간 표시 여부 (bool 타입, 기본값: true)
• remainingTimeTextStyle: 남은 시간 텍스트 스타일 (TextStyle 타입)
• countdownTextStyle: 카운트다운 텍스트 스타일 (TextStyle 타입)

4. 다양한 카운트다운 디자인 구현

위에서 소개된 옵션들을 활용하여 원하는 디자인과 기능의 카운트다운 타이머를 만들 수 있습니다.

• 색상 변경

SlideCountdown(
  duration: Duration(seconds: 60),
  color: Colors.red,
  borderWidth: 8.0,
  size: 150.0,
  padding: EdgeInsets.all(16.0),
  slideChild: Text('카운트다운!'),
  slideTextBuilder: (remainingTime) => remainingTime.toString() + '초',
  borderRadius: BorderRadius.circular(30.0),
  slideDirection: SlideDirection.LEFT_TO_RIGHT,
),

 

• 무한 반복 애니메이션

SlideCountdown(
  duration: Duration(seconds: 60),
  enableInfiniteAnimation: true,
  color: Colors.green,
  borderWidth: 6.0,
  size: 120.0,
  padding: EdgeInsets.all(12.0),
  slideChild: Text('무한 반복!'),
  slideTextBuilder: (remainingTime) => remainingTime.toString() + '초',
  borderRadius: BorderRadius.circular(25.0),
  slideDirection: SlideDirection.TOP_TO_BOTTOM,
),

 

5. 다양한 카운트다운 디자인 구현

• 사용자 정의 슬라이드

class MySlide extends AnimatedWidget {
  const MySlide({Key? key, required this.animation}) : super(key: key);

  final Animation<double> animation;

  @override
  Widget build(BuildContext context) {
    final animationPercent = animation.value;
    final width = animationPercent * 300;
    final height = 100;

    return Container(
      width: width,
      height: height,
      color: Colors.purple,
      child: Center(
        child: Text('${animationPercent.toStringAsFixed(2)}%'),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SlideCountdown(
            duration: Duration(seconds: 60),
            color: Colors.transparent,
            borderWidth: 0.0,
            size: 300.0,
            slideChild: MySlide(animation: animation,),
            slideTextBuilder: (remainingTime) => '',
          ),
        ),
      ),
    );
  }
}

 

• 카운트다운 완료 시 알림

import 'package:flutter/material.dart';
import 'package:slide_countdown/slide_countdown.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SlideCountdown(
            duration: Duration(seconds: 60),
            color: Colors.amber,
            onDone: () {
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: Text('카운트다운 완료!'),
                  content: Text('시간이 다 되었습니다!'),
                  actions: [
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('확인'),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

 

6. 마무리

slide_countdown 패키지를 활용하면 플러터 앱에서 매끄럽고 다양한 카운트다운 타이머를 쉽게 만들 수 있습니다.

위에 소개된 내용을 참고하여 원하는 디자인과 기능의 카운트다운 타이머를 만들어 보세요!

 

팁

• 다양한 옵션들을 조합하여 원하는 디자인을 만들 수 있습니다.
• 애니메이션 속도와 효과는 AnimationController 및 Curves 클래스를 사용하여 조정할 수 있습니다.
• 사용자 정의 위젯을 사용하여 더욱 독창적인 카운트다운 디자인을 만들 수 있습니다.

플러터 앱 개발에 도움이 되셨으면 좋겠습니다!

 

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg