Sliver의 애니메이션 효과와 동적 데이터 적용

Flutter의 Sliver 위젯은 스크롤 애니메이션과 동적 데이터 표시를 구현하기에 매우 적합합니다.
이 글에서는 Sliver의 애니메이션 효과를 활용하는 방법과 동적 데이터를 적용하는 사례를 다룹니다.

---

1. Sliver의 애니메이션 효과

Sliver 위젯은 스크롤 동작과 상호작용하면서 애니메이션 효과를 추가할 수 있습니다.

1.1 SliverAppBar의 스크롤 애니메이션

SliverAppBar는 스크롤에 따라 크기와 위치가 변경되는 애니메이션을 제공합니다.

SliverAppBar(
  expandedHeight: 200.0,
  floating: false,
  pinned: true,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('Animated AppBar'),
    background: Image.network(
      'https://example.com/image.jpg',
      fit: BoxFit.cover,
    ),
  ),
)

• floating: 스크롤을 멈추면 앱바가 바로 나타나게 설정.
• pinned: 스크롤 시 앱바가 상단에 고정되도록 설정.

1.2 SliverList에서 애니메이션 효과 추가

AnimatedList와 함께 사용하여 동적 데이터를 추가/삭제할 때 애니메이션 효과를 줄 수 있습니다.

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => AnimatedContainer(
      duration: Duration(milliseconds: 300),
      margin: EdgeInsets.symmetric(vertical: 10),
      color: Colors.blue[(index % 9) * 100],
      child: ListTile(
        title: Text('Item #$index'),
      ),
    ),
    childCount: 10,
  ),
)

---

2. 동적 데이터 적용

Sliver는 동적 데이터를 처리할 때 효율적으로 사용할 수 있습니다. 이를 위해 SliverList와 SliverGrid가 자주 활용됩니다.

2.1 SliverList에 동적 데이터 추가

class DynamicSliverList extends StatefulWidget {
  @override
  _DynamicSliverListState createState() => _DynamicSliverListState();
}

class _DynamicSliverListState extends State<DynamicSliverList> {
  final List<String> _items = ['Item 1', 'Item 2', 'Item 3'];

  void _addItem() {
    setState(() {
      _items.add('Item ${_items.length + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dynamic SliverList')),
      body: CustomScrollView(
        slivers: [
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text(_items[index])),
              childCount: _items.length,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addItem,
        child: Icon(Icons.add),
      ),
    );
  }
}

2.2 SliverGrid와 API 데이터 연동

class ApiSliverGrid extends StatefulWidget {
  @override
  _ApiSliverGridState createState() => _ApiSliverGridState();
}

class _ApiSliverGridState extends State {
  List _images = [];

  @override
  void initState() {
    super.initState();
    _fetchImages();
  }

  Future _fetchImages() async {
    // 예시 API 호출
    final data = [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg',
    ];
    setState(() {
      _images = data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('API SliverGrid')),
      body: CustomScrollView(
        slivers: [
          SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (context, index) => Image.network(_images[index]),
              childCount: _images.length,
            ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
            ),
          ),
        ],
      ),
    );
  }
}

---

3. 실습: Sliver 애니메이션과 동적 데이터를 결합

import 'package:flutter/material.dart';

class SliverCombinedExample extends StatefulWidget {
  @override
  _SliverCombinedExampleState createState() => _SliverCombinedExampleState();
}

class _SliverCombinedExampleState extends State<SliverCombinedExample> {
  final List<String> _items = ['Item 1', 'Item 2', 'Item 3'];

  void _addItem() {
    setState(() {
      _items.add('Item ${_items.length + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sliver Combined Example')),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            floating: true,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Sliver Example'),
              background: Image.network(
                'https://via.placeholder.com/400',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text(_items[index])),
              childCount: _items.length,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addItem,
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: SliverCombinedExample()));

---

4. 결론

Sliver 위젯은 스크롤 애니메이션과 동적 데이터를 결합하여 강력한 사용자 경험을 제공합니다. 위의 예제를 활용하여 더욱 창의적인 UI를 구현해 보세요. 다음 글에서는 Sliver와 애니메이션을 심화적으로 활용하는 고급 사례를 다룰 예정입니다.

---

참고 자료

• Flutter 공식 문서: https://flutter.dev/docs/development/ui/advanced/slivers
• AnimatedList 문서: https://api.flutter.dev/flutter/widgets/AnimatedList-class.html