[flutter] 플러터 Checkbox 애니메이션 효과 추가하기

07 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 앱을 개발할 수 있습니다. 이번 포스트에서는 플러터의 Checkbox 위젯에 애니메이션 효과를 추가하는 방법을 알아보겠습니다.

애니메이션 라이브러리 추가하기

Checkbox 위젯에 애니메이션 효과를 추가하기 위해, 먼저 플러터의 애니메이션 라이브러리를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 애니메이션 라이브러리를 추가해주세요:

dependencies:
  animations: ^3.1.0

프로젝트를 업데이트하기 위해 터미널에서 flutter pub get 명령어를 실행해주세요.

Checkbox 애니메이션 효과 사용하기

Checkbox 위젯에 애니메이션 효과를 사용하기 위해, animations 패키지에서 제공하는 애니메이션 위젯을 사용합니다. 아래의 예제 코드를 참고하여 Checkbox 위젯에 애니메이션을 추가해봅시다.

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

class AnimatedCheckbox extends StatefulWidget {
  @override
  _AnimatedCheckboxState createState() => _AnimatedCheckboxState();
}

class _AnimatedCheckboxState extends State<AnimatedCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isChecked = !isChecked;
        });
      },
      child: AnimatedCrossFade(
        duration: Duration(milliseconds: 200),
        crossFadeState: isChecked ? CrossFadeState.showSecond : CrossFadeState.showFirst,
        firstChild: Icon(Icons.check_box_outline_blank),
        secondChild: Icon(Icons.check_box),
      ),
    );
  }
}

// 사용 예시
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animated Checkbox Demo"),
      ),
      body: Center(
        child: AnimatedCheckbox(),
      ),
    );
  }
}

이 코드는 AnimatedCheckbox 클래스를 정의하고, isChecked라는 변수를 사용하여 체크 박스 상태를 관리합니다. onTap 이벤트에서 isChecked 값을 토글하여 체크 박스 상태를 변경합니다. AnimatedCrossFade 위젯을 사용하여 체크 박스의 애니메이션 효과를 구현합니다.

결론

이번 포스트에서는 플러터의 Checkbox 위젯에 애니메이션 효과를 추가하는 방법을 알아봤습니다. 애니메이션 라이브러리를 사용하여 Checkbox 위젯을 더욱 동적으로 만들 수 있습니다. 이를 활용하여 사용자에게 더 직관적인 UI를 제공할 수 있습니다.