[flutter] 플러터 리퀴드 스와이프의 성능 최적화 방법

18 Dec 2023

flutter

플러터에서 리퀴드 스와이프를 구현하면 앱의 사용자 경험을 향상시킬 수 있습니다. 그러나 많은 아이템을 가진 리스트에서 리퀴드 스와이프를 구현하면 성능에 영향을 미칠 수 있습니다. 여기에서는 플러터에서 리퀴드 스와이프의 성능을 최적화하는 방법을 알아보겠습니다.

1. 리스트 아이템 재사용

리퀴드 스와이프를 구현한 리스트에서 아이템을 스와이프할 때마다 새로운 위젯을 생성하면 성능에 악영향을 줄 수 있습니다. 대신에 Dismissible 위젯과 함께 key를 사용하여 리스트 아이템을 재사용하는 것이 좋습니다.

예시:

Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: _items.length,
    itemBuilder: (context, index) {
      return Dismissible(
        key: Key(_items[index].id),
        onDismissed: (direction) {
          setState(() {
            // Remove the item from the data source.
            _items.removeAt(index);
          });
        },
        background: Container(
          color: Colors.red,
          child: Icon(Icons.delete),
        ),
        child: ListTile(
          title: Text(_items[index].title),
          subtitle: Text(_items[index].subtitle),
        ),
      );
    },
  );
}

2. 애니메이션 최적화

리퀴드 스와이프는 애니메이션 효과가 포함되어 있기 때문에 성능에 영향을 미칠 수 있습니다. 애니메이션의 속도와 부드러움을 조정하여 최적의 성능을 얻을 수 있습니다. 또한 필요하지 않은 경우에는 애니메이션을 비활성화하는 것도 고려해야 합니다.

예시:

Dismissible(
  // ...
  movementDuration: Duration(milliseconds: 200),
  resizeDuration: Duration(milliseconds: 200),
  onResize: (details) {
    // Do something when resizing.
  },
  onDismissed: (direction) {
    // Do something when dismissed.
  },
);

3. GPU 가속화 활성화

리퀴드 스와이프에서 GPU 가속화를 활성화하여 그래픽 렌더링을 개선할 수 있습니다. 플러터에서는 Hardware-accelerated 옵션을 설정하여 GPU 가속화를 활성화할 수 있습니다.

예시:

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    debugShowCheckedModeBanner: false,
    enableGraphicsAcceleration: true,
    home: MyHomePage(),
  ));
}

리퀴드 스와이프를 구현하면서 성능을 최적화하기 위해 리스트 아이템의 재사용, 애니메이션 최적화, GPU 가속화 등을 고려하는 것이 중요합니다.

참고 문헌:

플러터 공식 문서: https://flutter.dev/docs
플러터 쿡북: https://flutter.dev/docs/cookbook

기술 블로그 작성일: 2022년 8월 30일