Dismissible

샤워실의 바보·2024년 2월 11일
0
post-thumbnail
// 중략
void _onDismissed(String notification) {
  _notifications.remove(notification);
  setState(() {});
}

// 중략
Dismissible(
  key: Key(notification),
  onDismissed: (direction) => _onDismissed(notification),
  background: Container(
    alignment: Alignment.centerLeft,
    color: Colors.green,
    child: const Padding(
      padding: EdgeInsets.only(
        left: Sizes.size10,
      ),
      child: FaIcon(
        FontAwesomeIcons.checkDouble,
        color: Colors.white,
        size: Sizes.size24,
      ),
    ),
  ),
  secondaryBackground: Container(
    alignment: Alignment.centerRight,
    color: Colors.red,
    child: const Padding(
      padding: EdgeInsets.only(
        right: Sizes.size10,
      ),
      child: FaIcon(
        FontAwesomeIcons.trashCan,
        color: Colors.white,
        size: Sizes.size24,
      ),
    ),
  ),
  child: ListTile(
    minVerticalPadding: Sizes.size16,
    leading: Container(
      width: Sizes.size52,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.white,
        border: Border.all(
          color: Colors.grey.shade400,
          width: Sizes.size1,
        ),
      ),
      child: const Center(
        child: FaIcon(
          FontAwesomeIcons.bell,
          color: Colors.black,
        ),
      ),
    ),
)

이 코드는 Dismissible 위젯을 사용하여 스와이프하여 삭제할 수 있는 ListTile 항목을 만들고 있습니다.

  • Dismissible 위젯은 스와이프하여 리스트 항목을 삭제하거나 아카이브하는 등의 동작을 수행할 때 사용합니다.

  • key: 각 항목의 고유한 식별자입니다. 이 예에서는 notification을 키로 사용하고 있습니다.

  • onDismissed: 항목이 스와이프될 때 호출되는 콜백 함수입니다.

  • background: 왼쪽으로 스와이프 할 때 나타나는 배경 위젯입니다. 여기서는 녹색 배경에 흰색 체크 아이콘을 보여주고 있습니다.

  • secondaryBackground: 오른쪽으로 스와이프 할 때 나타나는 배경 위젯입니다. 여기서는 빨간색 배경에 흰색 휴지통 아이콘을 보여주고 있습니다.

  • child: 실제로 화면에 표시되는 위젯입니다. 이 경우 ListTile이 사용되며, ListTile 안에는 알림 아이콘을 포함한 Container가 있습니다.

Dismissible은 Flutter에서 스와이프하여 항목을 삭제하거나 아카이브하는 등의 동작을 쉽게 구현할 수 있게 해주는 위젯입니다. 예를 들어, 이메일 앱에서 메시지를 스와이프하여 삭제하거나, 할 일 목록에서 항목을 스와이프하여 완료 처리하는 경우 등에 사용됩니다.

Dismissible의 주요 속성 및 기능은 다음과 같습니다:

  1. key: Dismissible 위젯의 핵심 속성 중 하나로, 각 항목을 구별하기 위한 고유 식별자를 나타냅니다. 각 항목이 고유해야 하므로, 일반적으로 리스트의 항목이 가지고 있는 고유한 값을 이용합니다.

  2. onDismissed: 항목이 성공적으로 스와이프되어 삭제될 때 호출되는 콜백입니다. 스와이프 방향(왼쪽 또는 오른쪽)에 따라 다른 동작을 수행할 수 있습니다.

이 함수는 String 타입의 notification 매개변수를 받아서 _notifications 리스트에서 해당 알림을 제거하고, setState 함수를 호출하여 화면을 다시 그리도록 합니다.

_onDismissed 함수는 Dismissable 위젯에서 사용되는 콜백 함수로, 사용자가 알림 항목을 스와이프하여 삭제할 때 호출됩니다. _notifications 리스트에서 해당 알림을 제거하고, setState 함수를 호출하여 화면을 다시 그리는 작업을 수행합니다.

다음은 _onDismissed 함수가 사용되는 Dismissable 위젯의 예시입니다.

Dismissable(
  key: Key(notification),
  onDismissed: (direction) {
    _onDismissed(notification);
  },
  child: ListTile(
    title: Text(notification),
  ),
);

위 코드에서는 Dismissable 위젯을 사용하여 알림 항목을 스와이프하여 삭제할 수 있도록 구현하고 있습니다. onDismissed 콜백 함수에서는 _onDismissed 함수를 호출하여 알림 항목을 삭제하고, 화면을 다시 그리는 작업을 수행합니다.

  1. backgroundsecondaryBackground: 스와이프하는 동안 보여질 배경 위젯입니다. background는 왼쪽으로 스와이프할 때, secondaryBackground는 오른쪽으로 스와이프할 때 나타납니다.

  2. direction: 스와이프 가능한 방향을 지정합니다. 기본적으로 양방향 모두 가능하지만, 특정 방향으로만 스와이프를 허용하려면 이 속성을 사용합니다.

  3. resizeDuration: 항목이 스와이프되어 삭제된 후의 리사이즈 애니메이션의 지속 시간입니다.

  4. confirmDismiss: 스와이프 전에 사용자에게 확인을 받을 수 있게 해주는 콜백입니다. 예를 들면, '정말 삭제하시겠습니까?'와 같은 대화 상자를 표시하여 사용자의 의사를 확인할 수 있습니다.

  5. movementDuration: 스와이프 동작의 지속 시간을 지정합니다.

  6. child: 실제로 화면에 표시되는 위젯, 예를 들면 리스트의 항목입니다.

Dismissible 위젯을 사용하면 사용자와 상호작용하는 동적인 UI를 간단하게 구현할 수 있습니다.

profile
공부하는 개발자

0개의 댓글