투데이 앱과 함께하는 Flutter 공급자 여정

1 부

공급자를 사용하여 앱 전체에서 데이터 가져오기

1 - .yaml 파일에 공급자 설치 및 패키지 가져오기
2 - 간단한 제공자 구현의 마인드맵 구축
3 - Todoey 앱 및 공급자 구현을 위한 마인드맵 구축


투쟁의 첫 번째 영역 -

ListView 및 해당 타일과 함께 공급자를 사용하는 방법(3부 및 4부)

버튼 업데이트 상태(2부)
4 - 코드 작성 시작
###TaskData 클래스 만들기
속성 작업 = []; (작업 목록에서 해제)

taskCount용 Getter
int get taskCount {
return tasks.length;
}
Void addNewTasks() {//목록에 작업 추가 ; notifyListeners(); }
void addNewTasks(String newTaskTitle) {
final task = Task(name: newTaskTitle);
tasks.add(task);
notifyListeners();
}

루트를 업데이트하여 최고 수준의 데이터에 액세스

오류가 발생했습니다. 'Widget Function(BuildContext)' 인수 유형을 'Widget Function(BuildContext, Widget)' 매개변수 유형에 할당할 수 없습니다.
builder를 사용하는 것이 더 이상 사용되지 않으며 대신 create를 사용해야 합니다. (2021년 4월 16일).

작업 화면

작업 수를 제공하도록 텍스트 위젯 업데이트'${Provider.of<TaskData>(context).tasks.length}',AddTaskScreen에서 SetState 주석 처리
더 이상 사용하지 않으므로 상태 비저장 위젯으로 변환setState속성 생성자가 필요하지 않도록 TaskListobject 업데이트

작업 목록

공급자 및 task_data 가져오기
작업 속성을 삭제하면 더 이상 필요하지 않으며 생성자도 필요하지 않습니다.
액세스하려는 속성에 따라 ToDoItem 생성자 데이터를 바꿉니다.Provider.of<TaskData>(context).tasks[index].name또한 주석 처리됨setState더 이상 setState를 사용하지 않으므로 상태 비저장 위젯으로 변환

공급자의 소비자 위젯

Provider.of<TaskData>(context).tasks[index].name에 액세스할 모든 위치를 반복하지 않아도 됩니다.
이것이 사용될 최상위 수준의 위젯을 래핑합니다.
우리의 경우 작업 목록에는 목록 보기 위젯이 있습니다.
이걸로 끝내return Consumer<TaskData>(
builder: (context, taskData, child) {
Return ListView….;
},
child: ListView.builder(
이제 taskData가 대체할 수 있음Provider.of<TaskData>(context)

2 부

목록 기능에 작업 추가

작업 추가 화면

단추onPressed: () {
//newValue comes from textfield input
Provider.of<TaskData>(context, listen: false)
.addNewTasks(newTaskTitle);
Navigator.pop(context);
},

파트 3

타일 ​​상태에 대한 기능

작업 데이터

void updateTask(Task task) {
task.toggleDone();
}

작업 타일

작업 목록(updateTask 사용을 제외하고 공급자에 특정한 항목 없음)final task = taskData.tasks[index];
return TodoItem(
newTodoItem: task.name,
tapped: task.isDone,
iconCallBack: (bool checkBoxState) {
TaskData().updateTask(task);
});현재 설정에서는 작동해야 하지만 작업 화면은 작업 추가 화면에서 버튼을 누를 때만 업데이트됩니다. Provider의 변경/업데이트와 관련이 있다고 생각합니다. 그와 관련하여 나는 listen: false 를 설정해야 했습니다. .. 우리가 소비자를 사용하고 있기 때문일 수 있습니다.

성공! 최신 버전의 Provider 패키지가 변경되었기 때문에 수신 속성을 false로 설정해야 합니다. 소비자 내부에 있더라도 청취 속성을 false로 설정하려면 Provider를 명시적으로 호출하여 updateTask 호출에 액세스해야 합니다. 이렇게 하면 위젯이 다시 렌더링될 수 있습니다.

final task = taskData.tasks[index];

       return TodoItem(

           newTodoItem: task.name,

           tapped: task.isDone,

           iconCallBack: (checkBoxState) {

             Provider.of<TaskData>(context, listen: false)

                 .updateTask(task);

           });

파트 4

작업 삭제

1 TaskData 모델에서 작업을 삭제하는 새 메서드를 만듭니다.
void deleteTask(Task task) {
_tasks.remove(task);
notifyListeners();
}
2 - TodoItem 생성자에서 새 콜백 생성
final Function longPressCallBack;
TodoItem({this.newTodoItem, this.tapped, this.iconCallBack, this.longPressCallBack});
3 - ListTile에는 생성자에서 새 속성을 호출할 onLongPress 속성이 있습니다.
return ListTile(
onLongPress: longPressCallBack,
4 - TasksList 위젯에서 TodoItem 생성자 업데이트
longPressCallBack: () {
Provider.of<TaskData>(context, listen: false)
.deleteTask(task);
},);
5 - TaskScreen은 새 TasksList 위젯을 자식으로 생성하므로 이 모든 정보를 가져와 업데이트해야 합니다. 완료!