[flutter] ListView에서 아이템을 스와이프하여 즐겨찾기 기능 추가하기

08 Dec 2023

flutter

Flutter 앱을 개발하다 보면 ListView에서 각 아이템을 스와이프하여 특정 작업을 수행하는 기능을 구현해야 할 때가 있습니다. 이번 포스트에서는 ListView에서 아이템을 스와이프하여 즐겨찾기 버튼을 추가해보겠습니다.

ListView에서 아이템을 스와이프하여 삭제 또는 수정하는 기능을 구현할 때에는 Dismissible 위젯을 사용할 수 있습니다. Dismissible 위젯은 부모 위젯으로 감싸진 자식 위젯을 스와이프할 때 특정 작업을 수행할 수 있도록 해줍니다.

즐겨찾기 버튼 추가하기

아이템을 스와이프하여 즐겨찾기 기능을 추가하기 위해, 각 리스트 아이템에 즐겨찾기 버튼을 추가하는 방법은 다양하게 있습니다. 예를 들어, ListTile을 커스텀하여 즐겨찾기 버튼을 추가하거나, 리스트 아이템을 구성하는 위젯을 커스텀하여 즐겨찾기 버튼을 포함시킬 수 있습니다.

ListView.builder(
  itemCount: _items.length,
  itemBuilder: (context, index) {
    return Dismissible(
      key: Key(_items[index].id),
      onDismissed: (direction) {
        // 즐겨찾기 작업 수행
      },
      background: Container(
        color: Colors.green,
        child: Icon(Icons.favorite),
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.only(left: 16.0),
      ),
      secondaryBackground: Container(
        color: Colors.red,
        child: Icon(Icons.delete),
        alignment: Alignment.centerRight,
        padding: EdgeInsets.only(right: 16.0),
      ),
      child: ListTile(
        title: Text(_items[index].title),
        // 나머지 리스트 아이템 구성 요소
      ),
    );
  },
)

위의 예제에서는 ListView.builder로 리스트를 생성하고, 각 아이템을 Dismissible 위젯으로 감싸 스와이프 기능을 추가했습니다. 즐겨찾기 버튼을 추가하기 위해서 Dismissible 위젯의 background 속성에 즐겨찾기 아이콘을 포함한 Container를, secondaryBackground 속성에 삭제 아이콘을 포함한 Container를 설정했습니다.

결론

ListView에서 아이템을 스와이프하여 즐겨찾기 버튼을 추가하는 방법에 대해 알아보았습니다. Dismissible 위젯을 사용하여 각 리스트 아이템에 스와이프 기능을 추가하고, 해당 기능을 활용하여 즐겨찾기 버튼을 구현할 수 있습니다. 다양한 디자인과 동작 요구사항에 맞게 ListView 아이템을 커스텀하여 스와이프 기능을 활용해보세요.

ListView와 Dismissible Widget

즐겨찾기 버튼 추가하기

결론