[flutter] velocity_x를 사용하여 어떻게 토글 스위치 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

토글 스위치는 사용자가 특정 동작을 켜거나 끌 수 있는 UI 요소입니다. velocity_x는 Flutter에서 사용하기 편리한 UI 관련 패키지입니다. velocity_x를 사용하여 토글 스위치에 애니메이션 효과를 쉽게 추가할 수 있습니다.

1. velocity_x 패키지 추가하기

먼저, pubspec.yaml 파일에 velocity_x 패키지를 추가해야 합니다. 다음과 같이 dependencies 섹션에 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^2.0.0

dependencies 섹션에 패키지를 추가한 후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

2. 토글 스위치 위젯 작성하기

토글 스위치 위젯을 작성하기 위해 VelocityX 위젯을 사용합니다. 아래는 기본적인 토글 스위치 위젯의 예입니다:

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

class ToggleSwitchAnimation extends StatefulWidget {
  @override
  _ToggleSwitchAnimationState createState() => _ToggleSwitchAnimationState();
}

class _ToggleSwitchAnimationState extends State<ToggleSwitchAnimation> {
  bool _isToggled = false;

  @override
  Widget build(BuildContext context) {
    return VxBox(
      child: VxAnimatedBox(
        duration: Duration(milliseconds: 500),
        child: VxSwitch(
          value: _isToggled,
          onChanged: (value) {
            setState(() {
              _isToggled = value;
            });
          },
        ),
      ),
    ).roundedLg.p4.color(_isToggled ? Colors.green : Colors.red).makeCentered();
  }
}

위의 코드에서, VelocityX 패키지의 VxBox 위젯으로 스위치를 감싸고, VxAnimatedBox로 애니메이션을 적용합니다.

3. 테마 설정하기

velocity_x를 사용하기 위해, 테마 설정 파일인 main.dart에 다음과 같이 코드를 추가해줍니다:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Toggle Switch Animation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ToggleSwitchAnimation(),
    );
  }
}

4. 실행하기

이제 앱을 실행하면, 토글 스위치에 애니메이션 효과가 적용된 것을 확인할 수 있습니다.

velocity_x 패키지를 사용하여 토글 스위치에 애니메이션 효과를 쉽게 추가할 수 있었습니다. velocity_x는 더 많은 유용한 기능을 제공하기 때문에, 다양한 UI 요소를 구현할 때 유용하게 사용할 수 있습니다.

더 많은 정보를 원한다면, velocity_x 패키지 문서를 참고해주세요.