[flutter] Swipeable Widget을 사용하여 댓글 목록 토글 기능 구현하기

08 Dec 2023

flutter

이번 글에서는 Flutter 앱 개발 중 리스트나 그리드와 같은 뷰를 스와이프하여 추가 기능을 표시할 수 있는 Swipeable Widget을 사용하여 댓글 목록을 토글하는 방법을 알아보겠습니다.

Swipeable Widget은 다양한 기능을 사용자가 쉽게 접근하고 제어할 수 있도록 하는데 도움을 줍니다. 여기서는 flutter_slidable 패키지를 사용하여 Swipeable 기능을 구현할 것입니다.

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

Slidable(
  actionPane: SlidableDrawerActionPane(),
  actionExtentRatio: 0.25,
  child: ListTile(
    title: Text('Swipe right for options'),
  ),
  secondaryActions: <Widget>[
    IconSlideAction(
      caption: 'Archive',
      color: Colors.blue,
      icon: Icons.archive,
      onTap: () => _showSnackBar('Archive'),
    ),
    IconSlideAction(
      caption: 'Share',
      color: Colors.indigo,
      icon: Icons.share,
      onTap: () => _showSnackBar('Share'),
    ),
  ],
)

위 코드에서 Slidable 위젯은 사용자가 스와이프했을 때 나타날 secondaryActions를 정의하고, actionPane과 actionExtentRatio를 설정하여 스와이프 행동에 대한 제어를 설정합니다.

2. 댓글 목록 토글 기능 구현하기

실제로 Swipeable을 사용하여 댓글 목록을 토글하는 경우에는 Swipe 시에 나타날 댓글 목록 숨김/표시 기능과 해당 댓글 목록에 대한 액션을 정의해야 합니다.

Slidable(
  actionPane: SlidableDrawerActionPane(),
  actionExtentRatio: 0.25,
  child: ListTile(
    title: Text('Post content'),
  ),
  secondaryActions: <Widget>[
    IconSlideAction(
      caption: 'Show Comments',
      color: Colors.blue,
      icon: Icons.comment,
      onTap: () => _toggleComments(),
    ),
  ],
)

이와 같이 Swipe 시에 나타날 댓글 목록 숨김/표시 기능과 해당 댓글 목록에 대한 액션을 정의하고, _toggleComments 메소드를 통해 댓글 목록을 토글하는 기능을 구현할 수 있습니다.

위와 같이 Swipeable Widget을 사용하면 댓글 목록을 토글하는 기능을 간단하게 구현할 수 있으며, 사용자들은 더욱 쉽게 앱을 제어할 수 있게 될 것입니다.

더 많은 정보는 flutter_slidable 패키지 문서를 참고해주세요.

이상으로 Swipeable Widget을 사용하여 댓글 목록 토글 기능을 구현하는 방법에 대해 알아보았습니다. 계속해서 Flutter 앱 개발을 진행하면서 유용한 기능들을 찾아보시길 바랍니다.

1. Swipeable Widget

2. 댓글 목록 토글 기능 구현하기