[Flutter 10일차💕] 일정 삭제 기능과 일정 개수 카운트 하기

오늘의 목표 : 일정 삭제 기능과 0개로 고정되어 있는 일정 개수 실시간 데이터 개수로 업데이트하기

핵심 개념

createState() : 위젯이 빌드할 때 호출되는 StatefulWidget 사용 시 필수 구현하는 메소드
DateTime : 날짜, 시간 제공하는 클래스
Scaffold : 기본 뼈대 위젯
floatingActionButton : 우측 하단에 떠있는 버튼
⭐️StreamBuilder⭐️ : 실시간 데이터를 화면에 업데이트할 때 사용하는 위젯

수업 코드

/screen/home_screen.dart

import 'package:flutter/material.dart';
import 'package:calendar_scheduler/component/main_calendar.dart';
import 'package:calendar_scheduler/component/schedule_card.dart';
import 'package:calendar_scheduler/component/today_banner.dart';
import 'package:calendar_scheduler/component/schedule_bottom_sheet.dart';
import 'package:calendar_scheduler/const/colors.dart';
import 'package:get_it/get_it.dart';
import 'package:calendar_scheduler/database/drift_database.dart';


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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>{
  DateTime selectedDate = DateTime.utc(

    DateTime.now().year,
    DateTime.now().month,
    DateTime.now().day,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: PRIMARY_COLOR,
        onPressed: (){
          showModalBottomSheet(
              context: context,
              isDismissible : true,
              builder: (_) =>ScheduleBottomSheet(
                selectedDate: selectedDate,
              ),
              isScrollControlled: true, // 화면 최대 높이를 : 화면 전체로 변경

          );
        },
        child: Icon(
          Icons.add,
        ),
      ),

      body: SafeArea(
          child: Column(
            children: [
              MainCalendar(
                selectedDate: selectedDate,
                //선택된 날짜 전달 코드

                onDaySelected: onDaySelected,
              ),
              SizedBox(height:8),
              StreamBuilder<List<Schedule>>(
                stream: GetIt.I<LocalDatabase>().watchSchedules(selectedDate),
                builder: (context, snapshoot){
                  return TodayBanner(
                      selectedDate: selectedDate,
                      count: snapshoot.data?.length ?? 0,
                  );
                },
              ),
              SizedBox(height:8),

              Expanded( //컬럼에서 남은 공간 전체를 차지하게 하는 공간
                  child: StreamBuilder<List<Schedule>>(  // 스트림빌더 : 바뀔때마다 알려줌
                    //스트림한 데이터를
                    // 스트림: 값 분해한 것을 ..
                    stream: GetIt.I<LocalDatabase>().watchSchedules(selectedDate),
                    // 데이터 베이스에서 가
                    // 새로 추가되거나 수정 되면 알려달라고 함
                    builder: (context, snapshot){
                      // snapshot : 데이터 와쓴ㄴ지, 에러 어떤건지
                      if (!snapshot.hasData) {
                        return Container(); // 없으면 : 빈화면
                      }
                      return ListView.builder(
                        itemCount:snapshot.data!.length,
                        itemBuilder: (context, index){
                          final schedule = snapshot.data![index]; // 일정 목록이 들어옴
                          return Dismissible(
                            key:ObjectKey(schedule.id), //유니크한 키값
                            direction:DismissDirection.startToEnd,
                            onDismissed: (DismissDirection direction) {
                            GetIt.I<LocalDatabase>()
                                .removeSchedule(schedule.id);
                            },
                            child: Padding(
                              padding: const EdgeInsets.only(bottom: 8, left:8,
                                  right: 8),
                              child: ScheduleCard(
                                  startTime: schedule.startTime,
                                  endTime: schedule.endTime,
                                  content: schedule.content
                              ),

                            ),
                          );
                        },
                      );
                    },
                  )
              )
            ],
          ),
      ),
    );
  }

  void onDaySelected(DateTime selectedDate, DateTime focusedDate) {
    // 날짜 선택될 때마다 실행할 함수
    setState(() {
      this.selectedDate = selectedDate;
    });

  }
}

=> 날짜 선택, 일정 추가,삭제,목록표시 담당하는 앱의 메인 화면

코드 분석

/screen/home_screen.dart

return Dismissible(
                            key:ObjectKey(schedule.id), //유니크한 키값
                            direction:DismissDirection.startToEnd,
                            onDismissed: (DismissDirection direction) {
                            GetIt.I<LocalDatabase>()
                                .removeSchedule(schedule.id);
                            },
                            child: Padding(
                              padding: const EdgeInsets.only(bottom: 8, left:8,
                                  right: 8),
                              child: ScheduleCard(
                                  startTime: schedule.startTime,
                                  endTime: schedule.endTime,
                                  content: schedule.content
                              ),

                            ),
                          );
                          
GetIt.I<LocalDatabase>()
    .removeSchedule(schedule.id); //실제 삭제 기능 schedule.id 고유한 번호
},

StreamBuilder<List<Schedule>>(
                stream: GetIt.I<LocalDatabase>().watchSchedules(selectedDate),
                builder: (context, snapshoot){
                  return TodayBanner(
                      selectedDate: selectedDate,
                      count: snapshoot.data?.length ?? 0,
                  );
                },
              ),

코드	역할	비고
Dismissible	일정 삭제	일정을 왼쪽에서 오른쪽으로 밀었을 때 일정 삭제
direction:DismissDirection.startToEnd	일정 삭제	미는 방향 지정
removeSchedule(schedule.id)	삭제 조건	DB에서 주는 고유한 번호를 지정하여 해당 번호 일정 삭제
count: snapshoot.data?.length ?? 0	일정 개수 세기	DB에서 가져온 일정 목록이 null이 아니면 개수 가져옴, null이면 0으로 표시

코드 동작 순서

1. selectedDate를 오늘 날짜로 초기화
2. 화면 렌더링(화면 그리기)
3. 달력에서 날짜 선택
4. onDaySelected 실행 → setState로 selectedDate 업데이트
   → MainCalendar 선택 날짜 파란색으로
   → TodayBanner 날짜 바뀜
   → StreamBuilder가 새 날짜 일정 자동으로 불러옴
5. 일정 추가 버튼 누름
   ScheduleBottomSheet 올라옴
   → 시작시간/종료시간/내용 입력
   → 저장 버튼 클릭 → DB에 저장
   → StreamBuilder 변화 감지
   → ScheduleCard 목록에 자동 추가
   → TodayBanner 개수 +1 카운트
6. 일정 삭제
   ScheduleCard 오른쪽으로 밀기
   → onDismissed 실행
   → removeSchedule(schedule.id)로 DB에서 삭제
   → StreamBuilder 변화 감지
   → 목록에서 자동으로 사라짐
   → TodayBanner 개수 -1 줄음

코드 직접 변경 후 적용

direction:DismissDirection.endToStart,

방향을 startToEnd에서 endToStart, up, down으로 바꿔서 삭제하기 위해 일정 카드를 미는 방향을 바꿔봤다.

코드	미는 방향
startToEnd	왼쪽 -> 오른쪽
endToStart	오른쪽 -> 왼쪽
up	아래 -> 위
down	위 -> 아래

에러 & 해결 방법

🚨에러🚨 : ❌

새로 알게된 것

StreamBuilder 개념을 새로 배웠다. StreamBuilder는 데이터가 계속 변경되기 때문에 사용한다. Stream에 데이터가 들어올 때마다 builder를 실행한다. snapshot은 들어온 데이터를 가지고 있다가 StreamBuilder가 새로운 데이터를 가지고 오면 새로운 데이터로 갱신하여 가지로 있는다. snapshot은 데이터뿐만 아니라 데이터 상태도 가지고 있는다. (hasError, hasData, data)

결과물

일정 삭제

일정 개수 실시간 데이터로 반영