// 중략
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
의 주요 속성 및 기능은 다음과 같습니다:
key: Dismissible
위젯의 핵심 속성 중 하나로, 각 항목을 구별하기 위한 고유 식별자를 나타냅니다. 각 항목이 고유해야 하므로, 일반적으로 리스트의 항목이 가지고 있는 고유한 값을 이용합니다.
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
함수를 호출하여 알림 항목을 삭제하고, 화면을 다시 그리는 작업을 수행합니다.
background 및 secondaryBackground: 스와이프하는 동안 보여질 배경 위젯입니다. background
는 왼쪽으로 스와이프할 때, secondaryBackground
는 오른쪽으로 스와이프할 때 나타납니다.
direction: 스와이프 가능한 방향을 지정합니다. 기본적으로 양방향 모두 가능하지만, 특정 방향으로만 스와이프를 허용하려면 이 속성을 사용합니다.
resizeDuration: 항목이 스와이프되어 삭제된 후의 리사이즈 애니메이션의 지속 시간입니다.
confirmDismiss: 스와이프 전에 사용자에게 확인을 받을 수 있게 해주는 콜백입니다. 예를 들면, '정말 삭제하시겠습니까?'와 같은 대화 상자를 표시하여 사용자의 의사를 확인할 수 있습니다.
movementDuration: 스와이프 동작의 지속 시간을 지정합니다.
child: 실제로 화면에 표시되는 위젯, 예를 들면 리스트의 항목입니다.
Dismissible
위젯을 사용하면 사용자와 상호작용하는 동적인 UI를 간단하게 구현할 수 있습니다.