To-Do List 앱 Step 9. 완료된 항목을 자동으로 삭제하는 옵션 추가

 
 
 
자, 오늘은 완료된 항목을
자동으로 삭제하는 옵션을 추가해 봅시다.
 
완료/미완료 체크가 가능하니까,
“완료 상태값을 가지고 뭔가를 한다.”
바로 예상되시죠 ?
재미있겠네요 ! 😆👍

---

<자동 삭제 시스템 이미지>

---

기능 추가 목록입니다. 😁
 
3 . 화면에 할 일 리스트 표시.
4 . 할 일 삭제 기능 추가
5 . 데이터 저장 추가
6 . 항목 완료 체크 기능 추가
7 . 완료/미완료 분리 표시 및 필터 기능 추가
8 . 할 일 목록 수정 기능 추가
9 . 완료된 항목을 자동으로 삭제하는 옵션 추가
…

---

와 ! 어느새 목표로 했던
마지막 목록까지 왔어요 !
 

 
하나씩 지워가는 재미가 있었는데,
마지막이라니 좀 아쉬운 감도 있네요.
… 그렇다고 해주세요 (ㅎ)
 
각설하고 바로 가봅시다 !
오늘의 코드를 반영하면 이런 화면이 됩니다 !

---

<완료된 항목을 자동으로 삭제하는 옵션 추가 결과>

---

PopupMenuButton 에
‘완료 자동 삭제’ 옵션이 추가됩니다.
화면에서는 사실 크게 변화가 느껴지진 않죠 (ㅎ)
 
그래도 “이런 옵션을 만들 수도 있구나~” 라고
생각해 주시면 감사드리겠습니다. 😅
 
기능을 구현하기 위한
오늘의 할 일 입니다. 😁

Today’s To-Do List

1 ) 완료 항목 자동 삭제 옵션 스위치 버튼 만들기
2 ) 완료 항목 자동 삭제 옵션 상태값 변수 만들기
3 ) 옵션 스위치 동작 만들기
4 ) 완료 상태 할 일 자동 삭제 메서드 만들기
5 ) 옵션 상태값 저장 및 로드 메서드 만들기
 
시작해 봅시다 !
 
 
 

---

1) 완료 항목 자동 삭제 옵션 스위치 버튼 만들기

기존 필터가 가능했던
PopupMenuButton 에
메뉴를 하나 더 추가해 봅시다.

---

<완료 자동 삭제 메뉴 추가>

---

음~ 밋밋하죠 ?
역시 토글할 수 있는
스위치가 좋겠습니다.
 
‘완료 자동 삭제’ 메뉴 옆에
스위치 버튼이 어떨까요 ?
 
좋아요.
도전해 봅시다. 😁
 
수정 버튼을 추가했을 때처럼
Row 위젯을 사용하면 되겠쥬?
 
< Row 위젯 참고 ! >
2024.12.06 - [Develog/Flutter] - To-Do List 앱 Step 8. 할 일 목록 수정 기능 추가

 
 
 
 

---

<스위치 토글 버튼(테스트) 추가!>

---

🔸mainAxisSize: MainAxisSize.max

수평 방향(가로)으로
여러 위젯을 배치할 때 사용되죠 : )
생략할 수 있지만 명시해 둡시다.
생략하면 max 가 default 값이죠 ~

 

🔸mainAxisAlignment: MainAxisAlignment.spaceBetween

‘완료 자동 삭제’ 와 ‘스위치 토글’ 사이에
공간을 두게 합니다.
이 속성이 없다면 ‘완료 자동 삭제’
텍스트 뒤에 딱 붙어요. 😑

 

🔸chidren [ ]

Row 위젯에 필수 속성이죠.
이번에는 Text 위젯과 Switch 위젯이 나란히 ~

 

🔸Switch ▶ value: false

Switch 위젯의 value 속성은
true / false 값이 설정되면 됩니다.
 
true (활성) / false (비활성) 이며,
여기에선 false 로 설정했기 때문에
화면에서는 회색으로 보여지죠.
true 값이면 불이 들어 온답니다 : )
 
하지만 지금은 false 로 고정되어 있기 때문에,
아직은 스위치 토글이 동작하지 않습니다.
 
이번에 배우게 된 스위치 위젯은
이후에도 용이하게 사용할 수 있을 것 같아요.
 
좋습니다 !
 
그럼 이제 스위치 위젯을 테스트 해봤으니,
실제로 이 토글을 활성화 했을 때
값이 바뀌는 상태값이 있어야겠죠 ?
 
 
 

---

2) 완료 항목 자동 삭제 옵션 상태값 변수 만들기

---

<옵션 상태값 변수 만들기>

---

아니?! 여기가 어디죠 ?
클래스의 최상단 이네요.
 
허어~ 이렇게 상위까지 가서
만들어야 하는 이유가 대체 뭔가요 ?
네~ 다 이유가 있습니다.

이전 _filter 값과 동일한 이유죠.
메서드에서도 사용되어야 하기 때문입니다.
따라서 지역변수로 만들면 사용하기 어렵겠죠?
 
true / false 값만 구분하면 되기 때문에,
bool (boolean) 타입으로 설정했습니다.
 
플래그죠 !
 
이 플래그에 따라 자동 삭제 옵션이
실시간으로 활성화 / 비활성화 되도록 할겁니다.
 
이제 다시 Switch 위젯으로 돌아가서
토글이 동작되도록 해봅시다.
 
두근두근 !
 

 
 
 
 

---

3) 옵션 스위치 동작 만들기

---

<스위치 위젯에 플래그 추가!>

---

Switch 위젯의 value 속성에
이제 false 혹은 true 로 고정하지 않고,
플래그(_autoDeleteCompleted)를 설정합시다.
 
onChanged 속성에서 value의 값을
즉각적으로 가져오게되고,
setState 에서 실제 플래그 값에 반영합니다.
 
사용자가 스위치를 동작하면,
즉각적으로 _autoDeleteCompleted 의 값이
true 혹은 false 로 바뀌게 되는거죠 !
 
좋습니다.
테스트 해봅시다 : )

---

<스위치 메뉴 터치 결과>

---

이럴수가… 스위치가 움직이지 않습니다.
 
물론 메뉴를 닫았다가 다시 열면,
스위치 상태가 바뀐 것을 볼 수 있습니다.
 
하지만, 스위치가 토글되는 것을
눈으로 봤으면 좋겠어요.
안 그런가요 ?
그렇다고 해주세요.. (ㅎ)
 
생각해보니 값만 변경되었지
렌더링이 실시간으로 바뀌도록
설정하지 않았던 거죠. 후~

 
 
자, PopupMenuButton (메뉴) 에서도
스위치가 실시간 토글될 수 있도록
추가해 봅시다 : )
 
흐음.. 어떻게 해야 할까요 ?
 
자, 화면 안의 렌더링은
Stateful 이 적용된 메서드 들이죠.
 
메뉴에서도 다를 바 없습니다.
 
child 속성에 적용되었던 Row 위젯을
Stateful 위젯으로 감싸면 되는 겁니다 : )
 
메뉴나 다이얼로그처럼 기존 화면 위에,
또 다른 창을 만드려면 Builder 가 필요했죠.
 
그렇기에 여기에서는
StatefulBuilder 를 사용합니다.
 
두둥 !
이름으로 기능을 알기 쉬워서 참 좋죠 (ㅎ)

---

<메뉴에서 스위치 토글되도록 설정!>

---

child 속성에 StatefulBuilder 위젯을 두고,
기존 Row 위젯은 return 하도록 했네요.
 
크게 달라지지 않았죠 ?
하지만 결과는 우리가 원하던 것이예요 !

---

<StatefulBuilder 추가 결과!>

---

짜잔 ! 어때요 ?
이제 메뉴 안에서
스위치 토글이 가능하답니다 : )
 
좋아요 !

 
이제야 조금 마음에 드네요.
다음으로 넘어가 봅시다 : )
 
이제 우리는 스위치로 상태값을
바로바로 변경할 수 있게 되었어요.
 
이제 뭘 해야 하죠 ?
옵션 상태에 따라
자동으로 삭제되도록 해야겠죠.
 
기능을 수행하는 메서드를 만들어 봅시다.
 
 
 

---

4) 완료 상태 할 일 자동 삭제 메서드 만들기

완료 상태를 체크할 수 있는
메서드가 이미 있었죠?
 
바로 _toggleTodoStatus 메서드 입니다.
 
할 일 항목 앞에 체크박스가 있고,
그 체크박스를 체크하거나 체크 해제하면,
이 메서드에서 완료/미완료
상태를 서로 바꿔주었죠.
 
여기에서 완료 상태의
할 일을 체크할 수 있으니까,
조건을 더 주어서 삭제까지 해보죠 : )

---

<옵션 활성 & 완료 항목 조건일 때 처리하기>

---

자동 삭제 옵션이 활성화 되어 있고,
해당 항목이 완료 상태라면,
removeAt 을 사용해서
삭제하도록 했습니다.
 
좋아요 !
 
이제는 항목 앞의 체크박스로
완료 상태를 체크하는 순간 !
 
할 일 목록에서 삭제되는 것을
볼 수 있습니다 !
 
(기존 체크된 항목들은 다시 체크 !)
 
잘 하셨습니다 ! 짝짝짝 !!

 
하지만 ! 문제가 되는 부분이 있죠.
 
한 번 앱을 한 번 재시작 해볼게요.

메뉴를 열어보면 이런,,
옵션 상태값이 다시 초기화(false) 되어
있는 것을 볼 수 있어요.
 

 
이런, 옵션에 대한 상태값도
저장을 해두어야 겠군요.
 
바로 이어서 설정해 봅시다 !
조금만 더 힘내요 !
 
 
 

---

5) 옵션 상태값 저장 및 로드 메서드 만들기

먼저 옵션 값을 로컬에 저장될 수 있도록 하겠습니다.

---

<완료항목 자동삭제 옵션 저장 메서드>

---

_todoList 항목을 로컬에 저장하는 메서드의
아래 쪽에 위치해 두었습니다.
 
저장 기능 추가할 때 같이 했었쥬 ?
 
To-Do List 앱 Step 5. 데이터 저장

To-Do List 앱 Step 5. 데이터 저장

 

옵션값은 true / false 2가지 값만
저장하면 되기 때문에 JSON 까지는
사용하지 않겠습니다.
 

🔸final prefs = await SharedPreferences.getInstance();

SharedPreferences 의 객체를 prefs 로 가져와서,
 

🔸await prefs.setBool('autoDeleteCompleted', _autoDeleteCompleted);

setBool 로 현재의 상태값을 저장하도록 할게요.
 
저장소의 키워드는 ‘autoDeleteCompleted’ 이고,
_autoDeleteCompleted 현재 옵션상태값을 저장합니다.
 
자~ 완성 !

 
하지만 저장은 여기서 끝나는게 아니죠?
 
어디선가에서 이 저장 메서드를 호출해 줘야 합니다.
어디서요 ?

---

<옵션 상태값 저장 메서드 호출!>

---

네 맞아요 !
 
스위치에서 옵션을 터치할 때,
상태값을 바로바로 저장하도록 하면 되겠네요 !
 
좋습니다.
 
그럼 저장을 했으니,
이제 로드를 해야겠죠 ?

---

<완료항목 자동삭제 옵션 로드하기!>

---

🔸final prefs = await SharedPreferences.getInstance();

SharedPreferences 의 객체를 prefs 로 가져와서,
 

🔸_autoDeleteCompleted = prefs.getBool('autoDeleteCompleted') ?? false;

prefs.getBool('autoDeleteCompleted') 로
‘autoDeleteSetting’ 키워드의 저장된 값을
_autoDeleteComplted 로 가져옵니다.
 
그런데 여기에서 특이한게 있죠.
‘ ?? ‘ 연산자입니다.
null 확인을 해줍니다.
 
prefs.getBool('autoDeleteCompleted') 에서
저장된 값이 있다면 값을
‘autoDeleteSetting’ 에 값을 넣어주지만,
만약 null 이라면 false 를 세팅하죠.
 
이 연산자를 사용하지 않으면,

if (prefs.getBool('autoDeleteCompleted') != null) {
  _autoDeleteCompleted = prefs.getBool('autoDeleteCompleted')!;
} else {
  _autoDeleteCompleted = false;
}

 
이렇게 if else 를 사용할 수 있습니다.
음, 전 ?? 연산자가 더 간결하고 좋네요. (ㅎ)
 

🔸setState(() { }

setState( ) 메서드로 감쌉니다.
(실시간 반영을 위함이죠.)
 
이제 이 옵션상태값 로드 메서드를
이제 initState 에 설정하면 됩니다.

---

<초기화 시 옵션상태값 로드>

---

자, 이제는 앱을 재시작해도
옵션이 유지되는 것을 볼 수 있습니다.
 
여기까지 정말 고생 많으셨습니다!
 
3 . 화면에 할 일 리스트 표시.
4 . 할 일 삭제 기능 추가
5 . 데이터 저장 추가
6 . 항목 완료 체크 기능 추가
7 . 완료/미완료 분리 표시 및 필터 기능 추가
8 . 할 일 목록 수정 기능 추가
9 . 완료된 항목을 자동으로 삭제하는 옵션 추가
 
목표했던 모든 기능을 추가해 봤네요.
 
사실 여기서 더 추가 가능한 기능은
정말 무궁무진 하겠죠.
 
앞으로 기회가 될 때마다,
목표를 잡고 추가 기능에 대한
내용을 올려보겠습니다.
 
봐주셔서 감사드립니다 : )
 
지금까지의 코드는
여기서 확인 가능합니다.
 
스테디빌더의 Github :
History for lib/main.dart - SteadyBuilder/todo_app

GitHub - SteadyBuilder/todo_app: To-Do List 앱 미니 프로젝트 입니다.

 

오늘도 고생하셨습니다.
 
끝!
 
 

---