Flutter Provider

입사에 대비해서 전역상태 관리법에 대하여 공부를 진행하였다.

종류

• Provider
• Bloc
• getX

Provider

lib
|   main.dart
|
+---models
|       task.dart
|       task_data.dart
|
+---screens
|       add_task_screen.dart
|       tasks_screen.dart
|
\---widgets
        tasks_list.dart
        task_tile.dart

하위 위젯을 프로바이더로 감싼다.

Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => TaskData(),
      child: MaterialApp(
        theme: ThemeData(
          primaryColor: Colors.lightBlueAccent,
        ),
        home: TasksScreen(),
      ),
    );
  }

리스너를 추가한다.

class TaskData extends ChangeNotifier {
  List<Task> _tasks = [
    Task(name: '우유사기'),
    Task(name: '계란사기'),
    Task(name: '빵사기'),
  ];
  UnmodifiableListView<Task> get tasks => UnmodifiableListView(_tasks);
  int get taskCount => _tasks.length;
  void addTask(String newTaskTitle) {
    _tasks.add(
      Task(
        name: newTaskTitle,
      ),
    );
    notifyListeners();
  }
}

사용하기

onPressed: () {
                Provider.of<TaskData>(context, listen: false)
                    .addTask(this.taskName);
                Navigator.pop(context);
              },

Cunsumer를 활용하여 사용하기

class TasksList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<TaskData>(
      builder: (context, taskData, child) {
        return ListView.builder(
          itemBuilder: (context, index) {
            final task = taskData.tasks[index];
            return TaskTile(
              taskTitle: task.name,
              isChecked: task.isDone,
              checkboxCallback: (_) {
                taskData.updateTask(task);
              },
              longPressCallback: () {
                taskData.removeTask(task);
              },
            );
          },
          itemCount: taskData.taskCount,
        );
      },
    );
  }
}