Front-end

consumer = state

Lyla. 2024. 6. 18. 00:14

Consumer<EventProvider>는 Flutter의 provider 패키지에서 제공하는 위젯 중 하나로, 상태를 소비하고 해당 상태에 따라 UI를 빌드하는 역할을 합니다. 주로 다음과 같은 상황에서 사용됩니다:

특정 상태를 읽고 UI에 반영: Consumer<EventProvider> 위젯 내부에서 상태를 읽고, 이 상태에 따라 UI를 업데이트합니다. 예를 들어, EventProvider 클래스가 상태를 관리하고 있다면, Consumer<EventProvider> 내부에서 해당 상태를 읽어서 이벤트 목록을 보여줄 수 있습니다.

부분적인 UI 갱신: Consumer는 자체적으로 갱신됩니다. 즉, 상태가 변경될 때 해당 Consumer 내부의 UI만 다시 렌더링됩니다. 이는 성능을 향상시키고, 불필요한 전체 UI의 리빌드를 방지하는 데 도움을 줍니다.

Expanded(
            child: Consumer<EventProvider>(
              builder: (context, eventProvider, child) {
                final events = eventProvider.getEventsForDay(_selectedDay);
                print('Events for selected day ($_selectedDay): $events');
                return ListView.builder(
                  itemCount: events.length,
                  itemBuilder: (context, index) {
                    final event = events[index];
                    return Draggable<Event>(
                      data: event,
                      feedback: Material(
                        child: Container(
                          padding: EdgeInsets.all(8.0),
                          color: Colors.blue,
                          child: Text(event.title, style: TextStyle(color: Colors.white)),
                        ),
                      ),
                      childWhenDragging: Opacity(
                        opacity: 0.5,
                        child: ListTile(
                          title: Text(event.title),
                        ),
                      ),
                      child: ListTile(
                        title: Text(event.title),
                        onTap: () async {
                          // 상세보기 및 수정
                          final result = await Navigator.of(context).push(MaterialPageRoute(
                            builder: (context) => EventDetailPage(event: event),
                          ));
                          if (result == true) {
                            setState(() {}); // 캘린더 상태 업데이트
                          }
                        },
                        onLongPress: () {
                          // 이벤트 복사
                          eventProvider.addEvent(event.copyWith(
                            dateTime: event.dateTime.add(Duration(days: 1)),
                          ));
                          setState(() {}); // 캘린더 상태 업데이트
                        },
                      ),
                    );
                  },
                );
              },
            ),
          ),