Flutter/10 app Todo with provider (8) 썸네일형 리스트형 [Flutter] App Todo(refactoring StateNotifierProvider) 오늘은 기존 코딩을 StateNotifierProvider 로 변경해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 2.10.3 소스코드 위치 - 09_StateNotifierProvider · mike-bskim/todo_test · GitHub Release 09_StateNotifierProvider · mike-bskim/todo_test github.com 수정 대상은 todo_filter.dart todo_search.dart todo_list.dart todo_active_count.dart filtered_todos.dart main.dart todos_screen.dart todo_filter.dart - 주요 수정부분만 표시함 class TodoFilter ex.. [Flutter] App Todo(ChangeNotifierProxyProvider -> ProxyProvider) 오늘은 ChangeNotifierProxyProvider 를 ProxyProvider 로 변경해보겠습니다. ChangeNotifierProxyProvider 를 사용하지만 내부적으로 저장할 state 가 없으면 변경가능하다. 대상은 todo_active_count.dart, filtered_todos.dart, main.dart 이다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 2.10.3 소스코드 위치 - 08_ProxyProvider · mike-bskim/todo_test (github.com) Release 08_ProxyProvider · mike-bskim/todo_test github.com todo_active_count.dart 수정 class TodoActiveCoun.. [Flutter] App Todo(with Provider) - 6단계 리스트 삭제, 편집 오늘은 todo 리스트 내용을 편집하거나 리스트 자체를 삭제하는 기능을 구현하겠습니다. 그리고 active 리스트 개수와 FilteredTodos 의 생성자도 약간 수정했습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 2.10.3 소스코드 위치 - 07_remove_edit_todoList · mike-bskim/todo_test (github.com) Release 07_remove_edit_todoList · mike-bskim/todo_test github.com todo_list.dart 수정 - 편집, 삭제 기능 추가 // 수정, id 값이 같으면 desc 를 변경. void editTodo(String id, String desc) { final newTodos = _st.. [Flutter] App Todo(with Provider) - 5단계 할일 개수 표시 오늘은 active 상태인 todo 리스트 개수를 표시해보자. 검색기능과 무관하게 순수한 active 개수만 계산한다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 2.10.3 소스코드 위치 - 06_Active_count · mike-bskim/todo_test (github.com) Release 06_Active_count · mike-bskim/todo_test github.com 동작 영상은 아래와 같다. todo_active_count.dart 생성 - 활성상태인 리스트의 개수를 화면 상단 우측에 표시한다. import 'package:equatable/equatable.dart'; import 'package:flutter/foundation.dart'; import 'pac.. [Flutter] App Todo(with Provider) - 4단계 검색 오늘은 검색 기능을 구현해보자. 검색기능은 필터 기능과 and 조건으로 동작한다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 2.10.3 소스코드 위치 - 05_doto_Search · mike-bskim/todo_test (github.com) Release 05_doto_Search · mike-bskim/todo_test github.com todo_search.dart 생성 - 검색할 단어를 provider 로 구현 import 'package:equatable/equatable.dart'; import 'package:flutter/foundation.dart'; class TodoSearchState extends Equatable { final String searchTer.. [Flutter] App Todo(with Provider) - 3단계 필터 및 리스트, cascade notation 오늘은 전체/할일/완료일을 구분할수 있는 필터 기능과 해당 필터에 맞는 리스트를 출력하는 기능을 구현해보자. 이전에는 필터 기능이 없어서 어떤 버튼(all/active/completed)을 선택해도 동일하게 Todo 리스트를 보여주었는데, 이번에는 필터에 따른 리스트 보여주기 기능을 추가할 예정이다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 2.10.3 소스코드 위치 - 04_filter_Filtered_Todos · mike-bskim/todo_test (github.com) Release 04_filter_Filtered_Todos · mike-bskim/todo_test github.com 필터 추가 및 해당 필터별 리스트는 아래 동영상처럼 동작한다. todo_filter.dar.. [Flutter] App Todo(with Provider) - 2단계 모델링 및 리스트 관리 Todo 리스트를 관리하는 provider 를 만들어 보자. 우선 모델을 만들고, 리스트 관리는 provider 를 이용하여 구현하였다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 2.10.3 소스코드 위치 - Release 03_model&todo_list · mike-bskim/todo_test (github.com) Release 03_model&todo_list · mike-bskim/todo_test github.com todo_model.dart - 모델링 import 'package:equatable/equatable.dart'; import 'package:uuid/uuid.dart'; // unique 번호 생성 Uuid uuid = const Uuid(); class .. [Flutter] App Todo(with Provider) - 1단계 화면구성 상태관리에서 배운 provider를 이용하여 todo 어플을 만들어 보려고 합니다. 오늘은 화면을 먼저만들어 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 2.10.3 소스코드 위치 - 02_screen_layout · mike-bskim/todo_test (github.com) Release 02_screen_layout · mike-bskim/todo_test github.com 전체 진행순서는 아래와 같다. 1. 화면 구성 2. 모델링 및 todo 리스트 관리(생성 및 완료체크) 3. 필터별 리스트 관리 4. 검색 기능추가(필터&검색, 필터와 검색 기능을 and 조건으로 구현) 5. 할일 개수 표시 6. todo 리스트 삭제 및 편집 기능 기본 화면 구성은 아래와 같다. .. 이전 1 다음
