Flutter swipe로 데이터 삭제 기능 구현 및 undo (Dismissible, SnackBar)

강정우·2023년 5월 20일
0

Flutter&Dart

목록 보기
30/87
post-thumbnail

Dismissible

  • swipable, removable, dismissible 이라고 불린다.

  • 이 위젯은 어떠한 List로 되어있는 위젯을 warpping하여 해당 List를 swipe하여 제거할 수 있도록 해주는 wrapper 위젯이다.

  • 얘는 2개의 속성값을 받는다. 바로 key, onDismissed

key

  • 보통의 Widget의 경우 key값은 신경쓰지 않아도 되지만 특정 몇몇 위젯에 한에서는 지정을 해줘야한다.
    바로 이 Dismissible 위젯이다. unique한 id로 사용하기 때문이다.

onDismissed

  • on 접두에서 알 수 있듯 위젯에 대한 이벤트가 발생하였을 때 작동하는 함수이다.

  • 이때 인수로 direction을 받는데 이는 방향에 따라서 어떤 함수를 실행시킬 것인지 지정할 수 있는 인수이다.

  • 물론 이때 여기서 onRemoveExpense라는 함수를 사용하기 위해 부모 위젯에 선언하고 해당 위젯에 생성자 함수의 인수로 넘겨줘서 사용하는 것이다.

데이터가 없을 때 예외화면 구현

  • 우선 build 메서드 안에 화면에 보여줄 mainContent 변수를 선언해준다.

  • default 값으로 보여줄 어떠한 텍스트 위젯을 생성하고 isNotEmpty 속성을 사용하여 내용물이 있을 때 보여줘야할 위젯을 넣어준다.

Dismissible로 삭제한 데이터 undo로 가져오기(ScaffoldMessenger)

  • 위 사진을 구현해보자.

  • 이때 무언가를 보여주고 안 보여주고는 show로 접두어가 붙은 수많은 위젯이 있지만
    여기서 우리가 사용해 볼것은 ScaffoldMessenger이다.

  • 그리고 ScaffoldMessenger 위젯은 반드시 .of() 메서드를 실행해주어야한다. 이 of 메서드는 UI를 조정하거나 showing하는데 매우 다양한 유틸리티 변수와 함수를 제공한다.

snackBar

  • 바로 위에서 언급한 UI를 조정하거나 showing하는데 사용되는 메서드중 하나이다. snackBar는 그저 정보를 showing하는데 사용되는 함수이다.

content

  • 그리고 이 snackBar는 content로 반드시 위젯을 넘겨줘야한다. 그런데 위 사진에서 알 수 있듯 아마 대부분은 Text 위젯일 것이다.

duration

  • 위 메시지가 얼마나 떠있게 할 것인지 설정하는 prop이다.

action

  • 스낵바에 기능을 추가할 때 쓰는 속성이다.

  • 여기서는 undo라는 label을 만들고 해당 label을 클릭할 때 동작할 함수를 선언한다.

  • 여기 add VS insert 메서드가 갈리는데 add는 puch처럼 배열 맨 뒤에 추가하는 것이고 insert는 이름에서 알 수 있듯 특정 인덱스에 삽입하는 것이다.

  • 물론 해당 메서드로 인하여 UI가 변해야하기 때문에 setState 메서드를 사용했다.

clearSnackBars

  • 만약 사용자가 연속해서 지우면 어떻게 될까? => 순서대로 뒤에 표시되기 때문에 가장 나중에 삭제한 메시지가 제일 뒤있을 것이고 이는 우리의도대로 만들어지지 않는 것이다.

  • 그래서 사용자가 연속해서 삭제 시 앞전의 메시지를 지워줘야하는데 이때 사용하는 함수가 clearSnackBars이다. 꽤나 직관적이다.

profile
智(지)! 德(덕)! 體(체)!

0개의 댓글