[Flutter] 가격 애니메이션 위젯 만들기

안녕하세요! 이번 블로그 글에서는 Flutter를 사용하여 스크롤할 때 가격이 애니메이션으로 변하는 리스트를 만드는 방법을 소개하겠습니다. 이 예제에서는 원래 가격과 세일 가격을 애니메이션으로 보여주는 간단한 목록을 구현해보겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Price Animation List')),
        body: PriceList(),
      ),
    );
  }
}

class PriceList extends StatefulWidget {
  @override
  _PriceListState createState() => _PriceListState();
}

class _PriceListState extends State<PriceList> with TickerProviderStateMixin {
  ScrollController _scrollController;
  List<AnimationController> _animationControllers = [];
  List<double> originalPrices = [100, 150, 200, 250, 300];
  List<double> salePrices = [80, 120, 160, 200, 240];

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
    _initializeAnimationControllers();
  }

  void _initializeAnimationControllers() {
    for (int i = 0; i < originalPrices.length; i++) {
      _animationControllers.add(AnimationController(
        duration: Duration(seconds: 2),
        vsync: this,
      ));
    }
  }

  void _scrollListener() {
    for (var i = 0; i < _animationControllers.length; i++) {
      if (_scrollController.position.pixels > i * 100 && !_animationControllers[i].isAnimating) {
        _animationControllers[i].forward();
      }
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    for (var controller in _animationControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemCount: originalPrices.length,
      itemBuilder: (context, index) {
        final priceAnimation = Tween<double>(
          begin: originalPrices[index],
          end: salePrices[index],
        ).animate(_animationControllers[index]);

        return AnimatedBuilder(
          animation: priceAnimation,
          builder: (context, child) {
            return ListTile(
              title: Text('Item ${index + 1}'),
              trailing: Text('\$${priceAnimation.value.toStringAsFixed(2)}'),
            );
          },
        );
      },
    );
  }
}

코드 설명

ScrollController를 사용하여 스크롤 이벤트를 감지합니다.
AnimationController 목록을 생성하여 각 항목의 애니메이션을 제어합니다.
_scrollListener 메서드에서 스크롤 위치에 따라 애니메이션을 시작합니다.
ListView.builder: 스크롤 가능한 리스트를 생성합니다.
각 항목에 대해 AnimationController를 초기화하고 Tween을 사용하여 원래 가격에서 세일 가격으로 애니메이션을 설정합니다.
AnimatedBuilder를 사용하여 애니메이션이 진행될 때마다 UI를 업데이트합니다.

결론

이 예제에서는 Flutter를 사용하여 가격 애니메이션 목록을 구현하는 방법을 배웠습니다. 스크롤 이벤트를 감지하고, 각 항목의 가격이 애니메이션으로 변경되는 모습을 구현하는 방법을 단계별로 설명했습니다. 이를 통해 Flutter의 애니메이션과 리스트뷰를 활용하는 방법을 익힐 수 있었습니다. Flutter로 더 많은 흥미로운 UI를 만들어 보세요!

궁금한 점이나 추가적인 도움이 필요하면 언제든지 댓글로 남겨주세요. 감사합니다!