[flutter] velocity_x를 사용하여 어떻게 별점 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

Flutter는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 다양한 기능을 제공합니다. 별점 애니메이션은 사용자에게 시각적인 피드백을 제공하고 재미요소를 추가하는 유용한 기능입니다. Flutter에서 velocity_x 패키지를 사용하여 간단한 별점 애니메이션을 만드는 방법을 알아보겠습니다.

velocity_x란?

velocity_x는 디자인 및 애니메이션 요소를 더 쉽게 다룰 수 있도록 도와주는 Flutter 패키지입니다. 여기에서는 velocity_x의 애니메이션 기능을 사용하여 별점 애니메이션을 만들어보겠습니다.

별점 애니메이션 구현하기

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

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.5.1

Flutter 애플리케이션의 메인 파일에서 velocity_x를 import합니다.

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

별점 애니메이션을 표시할 위젯을 생성합니다. 예를 들어, 다음과 같은 StarRating 위젯을 만들 수 있습니다.

class StarRating extends StatefulWidget {
  final int maxRating;
  final double rating;

  StarRating({this.maxRating = 5, this.rating = 0.0});

  @override
  _StarRatingState createState() => _StarRatingState();
}

class _StarRatingState extends State<StarRating> {
  double _rating;

  @override
  void initState() {
    super.initState();
    _rating = widget.rating;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: List.generate(
        widget.maxRating,
        (index) => Icon(
          Icons.star,
          color: index < _rating ? Colors.yellow : Colors.grey,
        ),
      ),
    );
  }
}

애니메이션 효과를 적용하기 위해 _rating 변수에 애니메이션 값을 지정할 수 있습니다. 예를 들어, velocity_x의 애니메이션 메소드를 사용하여 별점 애니메이션을 만들 수 있습니다.

@override
void initState() {
  super.initState();
  _rating = widget.rating;

  Future.delayed(const Duration(seconds: 1), () {
    setState(() {
      _rating = 4.5;
    });
  });
}

이제 별점 애니메이션을 표시할 페이지에서 위젯을 사용할 수 있습니다.

class RatingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("별점 애니메이션"),
      ),
      body: Center(
        child: StarRating(
          maxRating: 5,
          rating: 0.0,
        ),
      ),
    );
  }
}

여기에서는 StarRating 위젯을 사용하여 애니메이션이 적용된 별점을 표시합니다. maxRating 속성을 통해 별점의 최대 개수를 설정할 수 있으며, rating 속성을 통해 초기 별점을 설정할 수 있습니다.

별점 애니메이션을 추가하고 싶은 위젯에 StarRating 위젯을 추가하여 별점 애니메이션을 표시할 수 있습니다.

결론

velocity_x를 사용하여 Flutter 애플리케이션에 별점 애니메이션을 추가하는 방법에 대해 알아보았습니다. velocity_x 패키지를 사용하면 디자인 및 애니메이션 요소를 더 쉽게 조작할 수 있으며, 별점 애니메이션을 더욱 매끄럽고 흥미로운 방식으로 구현할 수 있습니다.

velocity_x란?

별점 애니메이션 구현하기

결론

References