[flutter] 리스트 아이템을 위한 애니메이션 효과 사용하기

11 Dec 2023

flutter

Flutter 앱에서 리스트 아이템에 애니메이션 효과를 적용하면 사용자 경험을 개선할 수 있습니다. 이번 포스트에서는 Flutter의 애니메이션을 이용하여 리스트 아이템에 쉽게 효과를 추가하는 방법에 대해 알아보겠습니다.

1. AnimatedContainer를 사용하여 크기 변환 애니메이션

리스트 아이템을 터치할 때, 크기가 변하는 애니메이션을 적용하고 싶다면 AnimatedContainer 위젯을 사용할 수 있습니다. 아래는 AnimatedContainer를 사용하여 리스트 아이템이 터치될 때 크기가 변하는 예제 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyList(),
    );
  }
}

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated List'),
      ),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              // Handle tap event
            },
            child: AnimatedContainer(
              duration: Duration(milliseconds: 300),
              height: 80,
              color: Colors.blue,
              child: Center(
                child: Text('Item $index'),
              ),
            ),
          );
        },
      ),
    );
  }
}

위 코드에서 AnimatedContainer 위젯을 사용하여 리스트 아이템이 터치될 때 크기가 변하도록 했습니다.

참고 자료

Official Flutter AnimatedContainer Documentation

2. AnimatedOpacity를 사용하여 투명도 애니메이션

리스트 아이템이 나타나거나 사라질 때 투명도 애니메이션을 적용하고 싶다면 AnimatedOpacity 위젯을 사용할 수 있습니다. 아래는 AnimatedOpacity를 사용하여 리스트 아이템이 나타나고 사라지는 애니메이션을 적용하는 예제 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyList(),
    );
  }
}

class MyList extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  bool _showItems = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated List'),
      ),
      body: Column(
        children: <Widget>[
          ElevatedButton(
            onPressed: () {
              setState(() {
                _showItems = !_showItems;
              });
            },
            child: Text('Toggle Items'),
          ),
          AnimatedOpacity(
            duration: Duration(milliseconds: 500),
            opacity: _showItems ? 1.0 : 0.0,
            child: Container(
              height: 100,
              color: Colors.green,
              child: Center(
                child: Text('List Item'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서는 AnimatedOpacity를 사용하여 리스트 아이템이 나타나거나 사라질 때 투명도가 변하도록 했습니다.

참고 자료

Official Flutter AnimatedOpacity Documentation

애니메이션 효과를 추가하여 Flutter 앱에서 보다 인상적인 리스트 아이템을 만들어보세요!