상태 관리 Provider

데이터들의 상태를 매번 setstate로 호출하여 가져오지 않고 상태관리 위젯으로 관리하는 것입니다. 

다음과 같은 데이터가 있다고 합시다.

첫번째 페이지에서는 데이터의 전체를 두번째 페이지에서는 그룹2에 해당하는 데이터를 세번째에서는 그룹1의 데이터만을 보여준다고 가정합시다.

각 페이지별로 데이터를 갖고있다고하면 페이지 1에서 데이터 1개를 삭제한다고 했을때 그 데이터가 그룹2인지 그룹1인지 확인하여 삭제해야 합니다.

상태관리 위젯들에서는 위와같은 데이터의 상태들을 일관성있게 관리하여 한쪽의 페이지에서 데이터가 변경되면 다른 페이지에서도 변경된 데이터가 적용되도록 관리할 수 있게 도와줍니다.

사용법을 알아봅시다. 우선 provider | Flutter Package (pub.dev)에서 install방법을 확인하여 프로젝트에 install합니다. 

import 'package:flutter/cupertino.dart';
import 'package:table_calendar/table_calendar.dart';

class Diary {
  DateTime dateTime;
  String content;
  Diary(this.dateTime, this.content);
}

class DiaryService extends ChangeNotifier {
  List diaries = [];

  void create(DateTime selectedDate, String text) {
    diaries.add(new Diary(selectedDate, text));
    notifyListeners();
  }

  List getDiary(DateTime selectedDate) {
    return diaries
        .where((element) => isSameDay(element.dateTime, selectedDate))
        .toList();
  }

  void delete(Diary diary) {
    diaries.remove(diary);
    notifyListeners();
  }

  void update(Diary selectedDiary, String text) {
    selectedDiary.content = text;
    notifyListeners();
  }
}

상태변화를 사용할 클래스를 생성합니다.
위에서는 Dairyservice 라는 클래스이고 changeNotifier를 상속받습니다.
ChangeNotifier는 상태변화를 시키기위해서 필요합니다.

그뒤에 create, delete update의 함수들은 service가 가지고있는 diaries 리스트를 변경시킵니다. 함수내에서 변경 이후에는 반드시 nofityListensers()를 호출하는 것을 볼 수 있습니다. 

void main() async {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => DiaryService()),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State createState() => _HomePageState();
}

main에서 MultiProvider를 생성하고 프로바이더리스트에

ChangeNotifierProvider를 생성하고 DiaryService를 create로 넣어줍니다. 이렇게하면 최상위에 생성된 DiaryService가 위치하게 됩니다. 그리고 child에서 App인 MyApp을 생성합니다. 

MyApp에서는 HomePage를 생성하고 HomePage의 State는 다음과 같습니다. 

class _HomePageState extends State {
  DateTime selectedDate = DateTime.now();
  var dateFormat = DateFormat('yyyy-MM-dd');
  TextEditingController createTextController = new TextEditingController();
  TextEditingController updateTextController = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (context, value, child) {
      List selectedDiaries = value.getDiary(selectedDate);
      return Scaffold(

HomePageState에서 Consumer Wdiget을 생성하는것을 확인할 수 있습니다. Consumer에서 DiaryService를 제네릭으로 지정해주면 builder의 두번째 parameter 위 코드에서 value에 DiaryService 객체가 나오는 것을 확인 할 수있습니다. 이 객체는 위 main()에서 생성한 DiaryService 객체와 동일합니다. 

Scaffold는 Cousumer밑에 선언된 객체이므로 상위객체가 가진 value라는 이름의 DiaryService 객체에 접근 할 수 있습니다.

직접적인 상위객체에 위와같은 Consumer를 사용하지 않은 경우에는 

DiaryService diaryService = context.read();

위와 같이 service에 접근 가능합니다.