ttt0_0.log

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

Wed, 27 May 2026 11:42:55 GMT

오늘의 목표 : 일정 삭제 기능과 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 createState() => _HomeScreenState();
}

class _HomeScreenState extends State{
  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>(
                stream: GetIt.I().watchSchedules(selectedDate),
                builder: (context, snapshoot){
                  return TodayBanner(
                      selectedDate: selectedDate,
                      count: snapshoot.data?.length ?? 0,
                  );
                },
              ),
              SizedBox(height:8),

              Expanded( //컬럼에서 남은 공간 전체를 차지하게 하는 공간
                  child: StreamBuilder>(  // 스트림빌더 : 바뀔때마다 알려줌
                    //스트림한 데이터를
                    // 스트림: 값 분해한 것을 ..
                    stream: GetIt.I().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()
                                .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()
                                .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()
    .removeSchedule(schedule.id); //실제 삭제 기능 schedule.id 고유한 번호
},

StreamBuilder>(
                stream: GetIt.I().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으로 표시

코드 동작 순서

selectedDate를 오늘 날짜로 초기화

화면 렌더링(화면 그리기)

달력에서 날짜 선택

onDaySelected 실행 → setState로 selectedDate 업데이트 → MainCalendar 선택 날짜 파란색으로 → TodayBanner 날짜 바뀜 → StreamBuilder가 새 날짜 일정 자동으로 불러옴

일정 추가 버튼 누름 ScheduleBottomSheet 올라옴 → 시작시간/종료시간/내용 입력 → 저장 버튼 클릭 → DB에 저장 → StreamBuilder 변화 감지 → ScheduleCard 목록에 자동 추가 → TodayBanner 개수 +1 카운트

일정 삭제 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)

결과물

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

[Flutter 9일차] 캘린더에 일정 추가 후 저장

Mon, 25 May 2026 08:00:05 GMT

오늘의 목표 : 캘린더에 일정 날짜, 시작/종료 시간, 내용 넣어서 저장하기

핵심 개념

Widget : Flutter 앱의 UI를 구성하는 가장 기본적이고 핵심적인 요소 생성자 안 required 변수 : 반드시 사용해야하는 변수 Column : 세로 방향으로 배치하는 기본 레이아웃 위젯 validator : 입력값 체크 StatefulWidget : 값이 변경되어 적용할 때 사용하는 위젯 StatelessWidget : 값이 변경되지 않는 화면의 위젯 async : 앱이 멈추지 않고 비동기 처리를 기다리게 하는 키워드 await : DB 저장이 끝날때까지 기다리고 실행하는 키워드 Expanded : 컬럼에서 남은 공간 전체를 차지하게 하는 공간 child : 부모 위젯 내부에 단 하나의 자식 위젯을 포함할 때 사용하는 속성

수업 코드

/component/custom_text_field.dart

import 'package:calendar_scheduler/const/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class CustomTextField extends StatelessWidget {
  //외부에서 받을 값 final
  final String label;
  final bool isTime; // 시간 입력용 True일때- 시간 입력  false - 일반 텍스트 입력

  final FormFieldSetter onSaved; // 입력값 저장하는 변수
  final FormFieldValidator validator; //입력값 체크하는 변수

  //생성자
  const CustomTextField({
    required this.label,
    required this.isTime,
    required this.onSaved,
    required this.validator,

    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          label,
          style: TextStyle(
            color: PRIMARY_COLOR,
            fontWeight: FontWeight.w600,
          ),
        ),
        Expanded(
          flex: isTime ? 0 : 1,
          child: TextFormField(

            onSaved: onSaved, // 입력값 최종 저장 시 실행
            validator: validator, // 입력값 체크


            cursorColor: Colors.grey,
            // isTime = true : 한 줄 입력
            maxLines: isTime ? 1 : null,
            // isTime = false : 여러 줄 입력 (박스 형태로 늘어남)
            expands: !isTime,
            keyboardType:
            isTime ? TextInputType.number : TextInputType.multiline,
            // TextInputType.number : 숫자 키보드
            // TextInputType.multiline : 일반 키보드
            inputFormatters: isTime
                ? [FilteringTextInputFormatter.digitsOnly] // 숫자만 입력가능하게 함
                : [],
            decoration: InputDecoration(
              border: InputBorder.none,
              filled: true,
              fillColor: Colors.grey[300],
              //
              suffixText: isTime ? '시' : null,
            ),
          ),
        ),
      ],
    );
  }
}

=>입력칸을 재사용 가능하게 만드는 코드

component/main_calendar.dart

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:calendar_scheduler/const/colors.dart';


class MainCalendar extends StatelessWidget{
  final OnDaySelected onDaySelected; //날짜 선택시 실행
  final DateTime selectedDate; //선택된 날짜

  const MainCalendar({
    required this.onDaySelected,
    required this.selectedDate,
  });

  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      locale: 'ko_kr',
      onDaySelected: onDaySelected,
      selectedDayPredicate: (date)=> //선택 된 날짜 구분 로직
      date.year == selectedDate.year&&
      date.month == selectedDate.month&&
      date.day == selectedDate.day,

      firstDay: DateTime(1800, 1, 1), //첫째날
      lastDay : DateTime(3000, 1, 11), //마지막 날
      focusedDay: DateTime.now(), //화면에 보여지는 날

      headerStyle: HeaderStyle(
        titleCentered: true,
        formatButtonVisible: false,
        titleTextStyle: TextStyle(
          fontWeight: FontWeight.w700,
          fontSize: 16.0,
        ),

      ),
      calendarStyle:CalendarStyle(
        isTodayHighlighted: false,
        defaultDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          color:LIGHT_GREY_COLOR
        ),
          weekendDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6.0),
              color:LIGHT_GREY_COLOR
          ),
          selectedDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6.0),
              border: Border.all(
                color: PRIMARY_COLOR,
                width: 1.0,
              ),
          ),
        defaultTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        weekendTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        selectedTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: PRIMARY_COLOR,
        ),
      ),

    );
  }


}

=> table_calendar 패키지 이용해서 한국어로 날짜 선택 가능한 캘린더 UI를 만든 위젯

component/schedule_bottom_sheet.dart

import 'package:drift/drift.dart' hide Column;
import 'package:get_it/get_it.dart';
import 'package:calendar_scheduler/database/drift_database.dart';

import 'package:flutter/material.dart';
import 'package:calendar_scheduler/const/colors.dart';
import 'package:calendar_scheduler/component/custom_text_field.dart';

//일정 등록 시 올라오는 창
// 입력값을 저장하기 위해 StatefulWidget으로 함
class ScheduleBottomSheet extends StatefulWidget{
  final DateTime selectedDate;


  const ScheduleBottomSheet({
    required this.selectedDate,
    Key? key}) : super(key:key);

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

class _ScheduleBottomSheetState extends State {
  final GlobalKey formKey = GlobalKey(); // 폼Key, 폼 조종 리모컨

  int? startTime; // 입력값 저장 변수
  int? endTime; // ? : null일 수도 있어서
  String? content;

  @override
  Widget build(BuildContext context) {
    //키보드 높이 가져오기
    final bottomInset = MediaQuery
        .of(context)
        .viewInsets
        .bottom;
    //viewInsets : 시스템이 차지하는 화면의 bottom: 아랫부분 크기를 알수 있음

    // *****중요
    // 저장 버튼 눌렀을 때 전체 입력한 값을 관리할 수 있도록 Form()으로 감쌈
    return Form(
      key: formKey,
      child: SafeArea(
        child: Container(
          // MediaQueㄴry : SafeArea에 화면의 반 차지하는 컨테이너 위젯을 배치
          height: MediaQuery.of(context).size.height / 2 + bottomInset,
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.all(8),
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: CustomTextField(
                        label: '시작시간',
                        isTime: true,
                        onSaved: (String? val) {
                          startTime = int.parse(val!);
                          // 모든 입력값은 문자여서 숫자로 변환함
                        },
                        validator: timeValidator,
                      ),
                    ),
                    Expanded(
                      child: CustomTextField(
                        label: '종료시간',
                        isTime: true,
                        onSaved: (String? val) {
                          endTime = int.parse(val!);
                        },
                        validator: timeValidator,
                      ),
                    ),
                    const SizedBox(width: 16),
                  ],
                ),
                SizedBox(height: 8),
                SizedBox(
                  height: 120,
                  child: CustomTextField(
                    label: '내용',
                    isTime: false,
                    onSaved: (String? val) {
                      content = val;
                    },
                    validator: contentValidator,
                  ),
                ),
                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton(
                    onPressed: onSavePressed,
                    style: ElevatedButton.styleFrom(foregroundColor: PRIMARY_COLOR),
                    child: Text('저장'),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  // 저장 버튼 눌렀을때
  // async : 시간을 기다릴 수 ㅣㅇ있게 기다리는
  void onSavePressed() async {
    if (formKey.currentState!.validate()) {
      //validate -> 하나라도 문제있으면 false qksghks
      // 전체 통과 -> true
      formKey.currentState!.save();
      // -> true일때 실행
      // ! -> null이 아니라고 확신할 때 dart에서 사용
      // formKey는 이미 연결을 해서 null이 아님
      // 현재 상태가 있음을 기본 베이스로 생각하기

      // await -> DB 저장이 끝날때까지 기다리고 실행
      await GetIt.I().createSchedule(
        SchedulesCompanion(
          startTime: Value(startTime!),
          endTime: Value(endTime!),
          content: Value(content!),
          date: Value(widget.selectedDate),
        ),
      );

      Navigator.of(context).pop();
    }
  }

  //폼키 실행
  String? timeValidator(String? val) {
    if(val==null) {
      return '값을 입력하세요!';
    }

    int? number;
    try {
      number = int.parse(val);
    } catch (e) {
      return "숫자만 입력하세요.";
    }

    if(number < 0 || number > 24) {
      return '0~24 사이를 입력하세요!';
    }

    return null;
  } // 시간 값 검증


  String? contentValidator(String? val){
    if(val == null || val.length == 0) {
      return '값을 입력하세요!';
    }
    return null;
  } // 내용 값 검증
}

=> 일정 추가 버튼 눌렀을 때 나오는 입력창 입력칸 내용 유효성 검사 후 DB에 저장하는 위젯

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 createState() => _HomeScreenState();
}

class _HomeScreenState extends State{
  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),
              TodayBanner(
                  selectedDate: selectedDate,
                  count: 0
              ),
              SizedBox(height:8),

              Expanded( //컬럼에서 남은 공간 전체를 차지하게 하는 공간
                  child: StreamBuilder>(  // 스트림빌더 : 바뀔때마다 알려줌
                    //스트림한 데이터를
                    // 스트림: 값 분해한 것을 ..
                    stream: GetIt.I().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 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;
    });

  }
}

=> 메인 화면, 전체 화면을 보여주는 위젯

코드 분석

component/custom_text_field.dart

코드	역할	비고
final 변수	외부에서 받을 값을 저장
required 변수	CustomTextField를 선언했을 때 반드시 사용해야하는 변수
CrossAxisAlignment.start	반대축의 시작점에 정렬	Column(세로) -> 가로 왼쪽, Row(가로) -> 세로 맨위
onSaved	입력값 최종 저장 시 실행
isTime ? TextInputType.number : TextInputType.multiline	isTime 값에 따라 다른 키보드형태	true : 숫자 키보드, false : 일반 키보드

component/main_calendar.dart

코드	역할	비고
isTodayHighlighted: false	오늘 날짜 강조를 없앰

component/schedule_bottom_sheet.dart

코드	역할	비고
createState()	State 객체를 생성하여 반환
final GlobalKey formKey = GlobalKey()	폼을 조종하는 리모컨	폼에 넣은 것들을 관리
MediaQuery	SafeArea에 화면의 반 차지하는 컨테이너 위젯을 배치	폼에 넣은 것들을 관리

코드 동작 순서

앱 시작 : *main.dart * LocalDatabase() 생성 GetIt에 DB 등록 HomeScreen 실행

화면 생성 : home_screen.dart selectedDate = 오늘 날짜로 초기화 MainCalendar 표시 TodayBanner 표시 StreamBuilder로 DB 일정 목록 실시간 감시

날짜 선택 : MainCalendar → onDaySelected 실행 → setState로 selectedDate 업데이트 → TodayBanner 날짜 바뀜 → StreamBuilder가 새 날짜 일정 자동으로 불러옴

일정 추가 버튼 클릭 FloatingActionButton 클릭 → ScheduleBottomSheet 올라옴 → CustomTextField로 시작시간/종료시간/내용 입력 → 저장 버튼 클릭 → 유효성 검사 → 통과하면 LocalDatabase().createSchedule()로 DB 저장 → BottomSheet 닫힘 → StreamBuilder가 변화 감지해서 ScheduleCard 자동으로 목록에 추가

** 일정 목록 표시** StreamBuilder가 DB 변화 감지 → ListView.builder로 ScheduleCard 목록 렌더링

코드 직접 변경 후 적용

schedule_bottom_sheet.dart

SizedBox(
                  height: 120,
                  child: CustomTextField(
                    label: '내용',
                    isTime: false,
                    onSaved: (String? val) {
                      content = val;
                    },
                    validator: contentValidator,
                  ),
                ),

저장 버튼을 보이게 하기 위해 height를 50으로 줄여봄 *height가 200일때 *

** height가 50일 때**

=> 내용 입력칸 사이즈가 작아짐

에러 & 해결 방법

🚨에러 : 코드를 수정하고 실행해서 수정한 부분을 확인할 때 iphone 기기로 선택해서 실행했을 때 적용이 되지 않음. (mac으로 실행했을 때는 수정한 부분이 잘 적용됌)

🔍 : 빌드 캐시 문제였음 (이전 컴파일 결과물을 불러 재사용함)

✅해결방법 : 터미널에 flutter clean -> flutter pub get -> flutter run -> iphone 선택 이후에는 실행할 때 실행 버튼 누른 후 실행 중인 터미널에 r키를 눌러 수정 => Hot reload(UI가 조금 수정)

새로 알게된 것

빌드 캐시 : flutter가 빌드(실행)할 때 매번 처음부터 컴파일하면 오래 걸려서, 이전에 컴파일한 결과물을 저장해두고 재사용한 것

결과물

[Flutter 8일차] 일정 등록 기능과 DB 연동

Mon, 11 May 2026 14:54:50 GMT

오늘의 목표 : 일정 등록 기능 추가와 Flutter에서 DB연동하기

핵심 개념

Stream을 사용하면 DB값이 바뀌면 화면도 자동 갱신된다 Drift는 Flutter에서 SQLite를 쉽게 관리하는 라이브러리이다. LazyDatabase를 사용하면 DB를 필요할때만 열어서 성능이 최적화된다.

수업 코드

/component/schedult_bottom_sheet.dart

import 'package:flutter/material.dart';
import 'package:calendar_scheduler/const/colors.dart';
import 'package:calendar_scheduler/component/custom_text_field.dart';

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

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

class _ScheduleBottomSheetState extends State {
  @override
  Widget build(BuildContext context) {
    //키보드 높이 가져오기
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;
    //viewInsets : 시스템이 차지하는 화면의 bottom: 아랫부분 크기를 알수 있음

    return SafeArea(
        child: Container(
          // MediaQuery : SafeArea에 화면의 반 차지하는 컨테이너 위젯을 배치
          height: MediaQuery.of(context).size.height/2 + bottomInset,
          color: Colors.white,
          child: Padding(
              padding: EdgeInsets.only(left:8, right:8, top:8),
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: CustomTextField(
                        label: '시작시간',
                        isTime: true,
                      ),
                    ),
                    const SizedBox(width: 16),
                    Expanded(
                      child: CustomTextField(
                        label: '종료시간',
                        isTime: true,
                      ),
                    ),
                    const SizedBox(width: 16),
                  ],
                ),
                SizedBox(height: 8),
                Expanded(
                  child: CustomTextField(
                      label: '내용',
                      isTime: false
                  ),
                ),
              ],
            ),
          ),
        ),
    );
  }
}

=> 사용자가 일정을 입력할 수 있도록 시작시간, 종료 시간, 내용을 입력받는 하단 창을 만드는 코드이다

/database/drift_database.dart

import 'package:calendar_scheduler/model/schedule.dart';
import 'package:drift/drift.dart';

import 'package:drift/native.dart';
import 'package:path_provider/path_provider.dart';
import 'package:path/path.dart' as p;
import 'dart:io';

part 'drift_database.g.dart';

@DriftDatabase(
  tables:[
    Schedules,
  ],
)

class LocalDatabase extends _$LocalDatabase {
  LocalDatabase():super(_openConnection());

  Stream> watchSechdules(DateTime date) =>
      (select(schedules).. where((tbl) => tbl.date.equals(date))).watch();

  Future createSchedule(SchedulesCompanion data) =>
      into(schedules).insert(data);

  Future removeSchedule(int id) =>
      (delete(schedules)..where((tbl)=>tbl.id.equals(id))).go();

  @override
  int get schemaVersion => 1;
}

LazyDatabase _openConnection(){
  return LazyDatabase(() async{
    final dbFolder = await getApplicationCacheDirectory();
    final file = File(p.join(dbFolder.path, 'db.sqlite'));
    return NativeDatabase(file);
  });
}

=> Drift 데이터베이스로 일정 데이터를 저장, 조회, 삭제하고 DB 파일을 생성하는 코드이다.

/model/schedule.dart

import 'package:drift/drift.dart';

class Schedules extends Table {
  IntColumn get id => integer().autoIncrement()();
  TextColumn get content => text()();
  DateTimeColumn get date => dateTime()();
  IntColumn get startTime => integer()();
  IntColumn get endTime => integer()();

}

일정 테이블을 만드는 코드

코드 분석

/component/schedult_bottom_sheet.dart

Widget build(BuildContext context) {
    //키보드 높이 가져오기
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;
    //viewInsets : 시스템이 차지하는 화면의 bottom: 아랫부분 크기를 알수 있음

    return SafeArea(
        child: Container(
          // MediaQueㄴry : SafeArea에 화면의 반 차지하는 컨테이너 위젯을 배치
          height: MediaQuery.of(context).size.height/2 + bottomInset,
          color: Colors.white,
          child: Padding(
              padding: EdgeInsets.only(left:8, right:8, top:8),
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: CustomTextField(
                        label: '시작시간',
                        isTime: true,
                      ),
                    ),
                    const SizedBox(width: 16),
                    Expanded(
                      child: CustomTextField(
                        label: '종료시간',
                        isTime: true,
                      ),
                    ),
                    const SizedBox(width: 16),
                  ],
                ),
                SizedBox(height: 8),
                Expanded(
                  child: CustomTextField(
                      label: '내용',
                      isTime: false
                  ),
                ),
              ],
            ),
          ),
        ),
    );
  }

코드	역할	비고
MediaQuery.of(context).viewInsets.bottom	키보드 높이 보기	화면에 아랫부분 크기를 알 수 있음
Expanded	입력창 크기 분배
SafeArea	안전 영역 확보

/database/drift_database.dart

class LocalDatabase extends _$LocalDatabase {
  LocalDatabase():super(_openConnection());

  Stream> watchSechdules(DateTime date) =>
      (select(schedules).. where((tbl) => tbl.date.equals(date))).watch();

  Future createSchedule(SchedulesCompanion data) =>
      into(schedules).insert(data);

  Future removeSchedule(int id) =>
      (delete(schedules)..where((tbl)=>tbl.id.equals(id))).go();

  @override
  int get schemaVersion => 1;
}

LazyDatabase _openConnection(){
  return LazyDatabase(() async{
    final dbFolder = await getApplicationCacheDirectory();
    final file = File(p.join(dbFolder.path, 'db.sqlite'));
    return NativeDatabase(file);
  });
}

코드	역할
Stream	바뀐 DB값 화면에 적용
LazyDatabase	DB 필요할 때만 열어서 사용
Future	나중에 줄 결과값
schemaVersion	데이터베이스 구조의 버전을 관리하는 값

/model/schedule.dart

import 'package:drift/drift.dart';

class Schedules extends Table {
  IntColumn get id => integer().autoIncrement()();
  TextColumn get content => text()();
  DateTimeColumn get date => dateTime()();
  IntColumn get startTime => integer()();
  IntColumn get endTime => integer()();

}

=> DB테이블 설계, 생성

코드	역할
autoIncrement()	자동 증가

새로 알게된 것

Flutter에서 DB를 생성할 때의 SQL문법을 새로 알게 되었다

결과물

[Flutter 7일차]

Wed, 22 Apr 2026 14:53:24 GMT

수업 주제 : calendar_scheduler 프로젝트 일정 추가하기 기능 넣기

수업 코드

/component/custom_text_field.dart

import 'package:calendar_scheduler/const/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class CustomTextField extends StatelessWidget {
  final String label;
  final bool isTime;

  const CustomTextField({
    required this.label,
    required this.isTime,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          label,
          style: TextStyle(
            color: PRIMARY_COLOR,
            fontWeight: FontWeight.w600,
          ),
        ),
        Expanded(
          flex: isTime ? 0 : 1,
          child: TextFormField(
            cursorColor: Colors.grey,
            maxLines: isTime ? 1 : null,
            expands: !isTime,
            keyboardType:
            isTime ? TextInputType.number : TextInputType.multiline,
            inputFormatters: isTime
                ? [FilteringTextInputFormatter.digitsOnly]
                : [],
            decoration: InputDecoration(
              border: InputBorder.none,
              filled: true,
              fillColor: Colors.grey[300],
              suffixText: isTime ? '시' : null,
            ),
          ),
        ),
      ],
    );
  }
}

/component/main_calendar.dart

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:calendar_scheduler/const/colors.dart';


class MainCalendar extends StatelessWidget{
  final OnDaySelected onDaySelected; //날짜 선택시 실행
  final DateTime selectedDate; //선택된 날짜

  const MainCalendar({
    required this.onDaySelected,
    required this.selectedDate,
  });

  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      onDaySelected: onDaySelected,
      selectedDayPredicate: (date)=> //선택 된 날짜 구분 로직
      date.year == selectedDate.year&&
      date.month == selectedDate.month&&
      date.day == selectedDate.day,

      firstDay: DateTime(1800, 1, 1), //첫째날
      lastDay : DateTime(3000, 1, 11), //마지막 날
      focusedDay: DateTime.now(), //화면에 보여지는 날

      headerStyle: HeaderStyle(
        titleCentered: true,
        formatButtonVisible: false,
        titleTextStyle: TextStyle(
          fontWeight: FontWeight.w700,
          fontSize: 16.0,
        ),

      ),
      calendarStyle:CalendarStyle(
        isTodayHighlighted: false,
        defaultDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          color:LIGHT_GREY_COLOR
        ),
          weekendDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6.0),
              color:LIGHT_GREY_COLOR
          ),
          selectedDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6.0),
              border: Border.all(
                color: PRIMARY_COLOR,
                width: 1.0,
              ),
          ),
        defaultTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        weekendTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        selectedTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: PRIMARY_COLOR,
        ),
      ),

    );
  }


}

/component/schedule_bottom_sheet.dart

import 'package:flutter/material.dart';
import 'package:calendar_scheduler/component/custom_text_field.dart';

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

  @override
  State createState() => _ScheduleBottomSheetState();

}

class _ScheduleBottomSheetState extends State {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Container(
          // MediaQuery : SafeArea에 화면의 반 차지하는 컨테이너 위젯을 배치
          height: MediaQuery.of(context).size.height/2,
          color: Colors.white,
          child: CustomTextField(label: '시작시간', isTime: true,)
        ),
    );
  }
}

/component/schedule_card.dart

//schedule_card.dart

import 'package:calendar_scheduler/const/colors.dart';
import 'package:flutter/material.dart';

class ScheduleCard extends StatelessWidget{
  final int startTime;
  final int endTime;
  final String content;

  const ScheduleCard({
    required this.startTime,
    required this.endTime,
    required this.content,
    Key ? key,
  }) : super(key:key);

  @override
  Widget build(BuildContext context) {
    // 바깥 박스
    return Container(
      decoration: BoxDecoration(
        // 테두리
        border: Border.all(
          width: 1.0,
          color: PRIMARY_COLOR,
        ),
        // 테두리 둥글기정도
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Padding(
        // 텍스트가 테두리에 붙지 않게
        padding: const EdgeInsets.all(16),
        // Intrinsic : 본질적인
        // 최대 크기만큼 내부 높이를 최대로 맞춰줌
        child: IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              _Time(startTime: startTime, endTime: endTime,),
              SizedBox(width: 16,), // 여백
              _Content(content: content),
              SizedBox(width: 16,)
            ],
          ),
        )
      ),
    );
  }
}

//파일 내부에서만 사용하는 프라이빗 클래스 (_)
class _Time extends StatelessWidget{
  final int startTime; //값 재할당 불가 -> final
  final int endTime; //값 재할당 불가 -> final

  // 성능 최적화, 재할당 불가 ->  const
  const _Time({
    required this.startTime,
    required this.endTime,
    Key? key,
  }) : super(key:key);

  @override
  Widget build(BuildContext context) {
    // 텍스트 스타일 정의
    final textStyle = TextStyle(
      fontWeight: FontWeight.w600, //약간 굵은 글씨
      color:PRIMARY_COLOR, //저번에 지정함
      fontSize: 16.0,
    );

    //세로방향 위젯 배치
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start, //왼쪽 정렬
      children: [
        Text(
          '${startTime.toString().padLeft(2, '0')}:00',
          style: textStyle.copyWith(
            fontSize: 10.0
          ),
        ),
        Text(
          '${endTime.toString().padLeft(2, '0')}:00',
          style: textStyle.copyWith(
            fontSize: 10.0,
          ),
        ),
      ],
    );
  }
}

class _Content extends StatelessWidget {
  final String content;

  const _Content({
    required this.content,
    Key ? key,
  }) : super(key : key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Text(
        content,
      ),
    );
  }
}

/component/today_banner.dart

import 'package:calendar_scheduler/const/colors.dart';
import 'package:flutter/material.dart';

class TodayBanner extends StatelessWidget {
  final DateTime selectedDate;
  final int count;

  const TodayBanner({
    required this.selectedDate,
    required this.count,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final textStyle = TextStyle(
      fontWeight: FontWeight.w600,
      color: Colors.white,
    );

    return Container(
      color: PRIMARY_COLOR,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '${selectedDate.year}년 ${selectedDate.month}월 ${selectedDate.day}일',
              style: textStyle,
            ),
            Text(
              '$count개',
              style: textStyle,
            ),
          ],
        ),
      ),
    );
  }
}

/const/colors.dart

import 'package:flutter/material.dart';

const PRIMARY_COLOR = Color(0xFFFE3977E9);
final LIGHT_GREY_COLOR = Colors.grey[200]!;
final DARK_GREY_COLOR = Colors.grey[600]!;
final TEXTFIELD_FILL_COLOR = Colors.grey[300]!;

/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';


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

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

class _HomeScreenState extends State{
  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(),
          );
        },
        child: Icon(
          Icons.add,
        ),
      ),

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

                onDaySelected: onDaySelected,
              ),
              SizedBox(height:8),
              TodayBanner(
                  selectedDate: selectedDate,
                  count: 0
              ),
              SizedBox(height:8),
              ScheduleCard(startTime: 12,
                  endTime: 14,
                  content: '프로그래밍 공부'
              ),
            ],
          )
      ),
    );
  }

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

  }
}

main.dart

import 'package:calendar_scheduler/screen/home_screen.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(
    MaterialApp(
      home: HomeScreen()
    ),
  );
}

코드 분석

/component/custom_text_field.dart

Expanded(
          flex: isTime ? 0 : 1,
          child: TextFormField(
            cursorColor: Colors.grey,
            // isTime = true : 한 줄 입력
            maxLines: isTime ? 1 : null,
            // isTime = false : 여러 줄 입력 (박스 형태로 늘어남)
            expands: !isTime,
            keyboardType:
            isTime ? TextInputType.number : TextInputType.multiline,
            // TextInputType.number : 숫자 키보드
            // TextInputType.multiline : 일반 키보드
            inputFormatters: isTime
                ? [FilteringTextInputFormatter.digitsOnly] // 숫자만 입력가능하게 함
                : [],
            decoration: InputDecoration(
              border: InputBorder.none,
              filled: true,
              fillColor: Colors.grey[300],
              //
              suffixText: isTime ? '시' : null,
            ),
          ),
        ),

코드	역할	비고
final bool isTime	입력창 종류 결정	true : 한 줄 입력, false : 여러 줄 입력
keyboardType	키보드 종류 결정	TextInputType.number : 숫자 키보드, TextInputType.multiline : 일반키보드
FilteringTextInputFormatter.digitsOnly	입력창에 숫자만 들어오게 막는 필터 역할
suffixText: isTime ? '시' : null	입력창 오른쪽 끝에 붙는 텍스트	isTime이 true -> 입력받은 텍스트 오른쪽에 '시'붙임, false -> null

/component/schedule_bottom_sheet.dart

return SafeArea(
        child: Container(
          // MediaQuery : SafeArea에 화면의 반 차지하는 컨테이너 위젯을 배치
          height: MediaQuery.of(context).size.height/2,
          color: Colors.white,
          child: CustomTextField(label: '시작시간', isTime: true,)
        ),
    );

코드	역할
SafeArea	폰 화면에서 잘리는 부분을 피해서 배치해주는 위젯
MediaQuery	화면의 크기를 알려줌
MediaQuery.of(context).size.height/2	화면의 반을 차지하는 컨테이너 위젯

/component/schedule_card.dart

Widget build(BuildContext context) {
    // 바깥 박스
    return Container(
      decoration: BoxDecoration(
        // 테두리
        border: Border.all(
          width: 1.0,
          color: PRIMARY_COLOR,
        ),
        // 테두리 둥글기정도
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Padding(
        // 텍스트가 테두리에 붙지 않게
        padding: const EdgeInsets.all(16),
        // Intrinsic : 본질적인
        // 최대 크기만큼 내부 높이를 최대로 맞춰줌
        child: IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              _Time(startTime: startTime, endTime: endTime,),
              SizedBox(width: 16,), // 여백
              _Content(content: content),
              SizedBox(width: 16,)
            ],
          ),
        )
      ),
    );

//세로방향 위젯 배치
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start, //왼쪽 정렬
      children: [
        Text(
          '${startTime.toString().padLeft(2, '0')}:00',
          style: textStyle.copyWith(
            fontSize: 10.0
          ),
        ),
        Text(
          '${endTime.toString().padLeft(2, '0')}:00',
          style: textStyle.copyWith(
            fontSize: 10.0,
          ),
        ),
      ],
    );

코드	역할	비고
Container	바깥 테두리 박스
BorderRadius.circular()	테두리 둥글기 정도
padding: EdgeInsets.all(16)	테두리 붙지않게 만듦
IntrinsicHeight()	내부 요소 높이를 가장 큰 기준에 맞춰줌
Row(crossAxisAlignment: CrossAxisAlignment.stretch,)	가로 배치	Row : 가로 (행) -> crossAxisAlignment : 세로 (열)
startTime.toString().padLeft(2, '0')	한자리 숫자 코드 -> 왼쪽에 '0'붙여 두자리 만듦

/component/today_banner.dart

return Container(
      color: PRIMARY_COLOR,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '${selectedDate.year}년 ${selectedDate.month}월 ${selectedDate.day}일',
              style: textStyle,
            ),
            Text(
              '$count개',
              style: textStyle,
            ),
          ],
        ),
      ),
    );

코드	역할	비고
Padding(padding: EdgeInsets.symmetric(horizontal: 16,vertical: 8),)	안쪽 여백	좌우 : 16, 상하 : 8
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,)	가로 배치, 양끝 정렬

새로 알게된 것

오늘 나간 진도중에서 기본 틀 코드빼고는 거의다 새로 알게되었다. keyboardType : isTime의 값에 따라 키보드 형태 결정 FilteringTextInputFormatter.digitsOnly : 숫자만 거르는 필터 역할 MediaQuery : 화면의 사이즈 IntrinsicHeight() : 내부 요소 높이를 최대로 맞춰줌 padding: EdgeInsets.all(16) : 안쪽 여백 맞추기 ++ MainAxisAlignment, CrossAxisAlignment는 완벽 이해된 것 같다.

결과물

[Flutter 6일차]

Tue, 21 Apr 2026 06:50:39 GMT

수업 주제 : table_calendar 플러그인 활용

전체 코드

/screen/main.dart

import 'package:calendar_scheduler/screen/home_screen.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(
    MaterialApp(
      home: HomeScreen()
    ),
  );
}

/screen/home_screen.dart

import 'package:flutter/material.dart';
import 'package:calendar_scheduler/component/main_calendar.dart';


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

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

class _HomeScreenState extends State{
  DateTime selectedDate = DateTime.utc(
    DateTime.now().year,
    DateTime.now().month,
    DateTime.now().day,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Column(
            children: [
              MainCalendar(
                selectedDate: selectedDate,
                //선택된 날짜 전달 코드

                onDaySelected: onDaySelected,
              ),
            ],
          )
      ),
    );
  }

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

  }
}

/component/main_calendar.dart

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:calendar_scheduler/const/colors.dart';


class MainCalendar extends StatelessWidget{
  final OnDaySelected onDaySelected; //날짜 선택시 실행
  final DateTime selectedDate; //선택된 날짜

  const MainCalendar({
    required this.onDaySelected,
    required this.selectedDate,
  });

  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      onDaySelected: onDaySelected,
      selectedDayPredicate: (date)=> //선택 된 날짜 구분 로직
      date.year == selectedDate.year&&
      date.month == selectedDate.month&&
      date.day == selectedDate.day,

      firstDay: DateTime(1800, 1, 1), //첫째날
      lastDay : DateTime(3000, 1, 11), //마지막 날
      focusedDay: DateTime.now(), //화면에 보여지는 날

      headerStyle: HeaderStyle(
        titleCentered: true,
        formatButtonVisible: false,
        titleTextStyle: TextStyle(
          fontWeight: FontWeight.w700,
          fontSize: 16.0,
        ),

      ),
      calendarStyle:CalendarStyle(
        isTodayHighlighted: false,
        defaultDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          color:LIGHT_GREY_COLOR
        ),
          weekendDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6.0),
              color:LIGHT_GREY_COLOR
          ),
          selectedDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6.0),
              border: Border.all(
                color: PRIMARY_COLOR,
                width: 1.0,
              ),
          ),
        defaultTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        weekendTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        selectedTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: PRIMARY_COLOR,
        ),
      ),

    );
  }


}

/const/color.dart

import 'package:flutter/material.dart';

const PRIMARY_COLOR = Color(OxFFFE3977E9);
final LIGHT_GREY_COLOR = Colors.grey[200]!;
final DARK_GREY_COLOR = Colors.grey[600]!;
final TEXTFIELD_FILL_COLOR = Colors.grey[300]!;

코드 분석

home_screen.dart

DateTime selectedDate = DateTime.utc(
    DateTime.now().year,
    DateTime.now().month,
    DateTime.now().day,
  );

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

코드	역할	비고
selectedDate	오늘 날짜를 기본값으로 설정
utc	시간 영향을 제거, 날짜만 비교하기 위해 사용	전 세계가 기준으로 사용하는 표준 시간
onDaySelected	날짜 클릭될 때마다 실행

main_calendar.dart

const MainCalendar({
    required this.onDaySelected,
    required this.selectedDate,
  });

  return TableCalendar(
      onDaySelected: onDaySelected,
      selectedDayPredicate: (date)=> //선택 된 날짜 구분 로직
      date.year == selectedDate.year&&
      date.month == selectedDate.month&&
      date.day == selectedDate.day,

      firstDay: DateTime(1800, 1, 1), //첫째날
      lastDay : DateTime(3000, 1, 11), //마지막 날
      focusedDay: DateTime.now(), //화면에 보여지는 날

      headerStyle: HeaderStyle(
        titleCentered: true,
        formatButtonVisible: false,
        titleTextStyle: TextStyle(
          fontWeight: FontWeight.w700,
          fontSize: 16.0,
        ),

      ),
      calendarStyle:CalendarStyle(
        isTodayHighlighted: false,
        defaultDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          color:LIGHT_GREY_COLOR
        ),
          weekendDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6.0),
              color:LIGHT_GREY_COLOR
          ),
          selectedDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6.0),
              border: Border.all(
                color: PRIMARY_COLOR,
                width: 1.0,
              ),
          ),
        defaultTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        weekendTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        selectedTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: PRIMARY_COLOR,
        ),
      ),

    );

코드	역할	비고
MainCalendar	캘린더 UI 컴포넌트	재사용 가능
TableCalendar	캘린더 위젯	외부 패키지
onDaySelected	날짜 클릭될 때마다 실행	부모에서 전달받는 콜백함수
selectedDayPredicate	선택된 날짜인지 구분하는 로직	날짜 비교 로직
calendarStyle	폰트 사이즈, 컬러 변경	캘린더 디자인 설정

color.dart

import 'package:flutter/material.dart';

const PRIMARY_COLOR = Color(OxFFFE3977E9);
final LIGHT_GREY_COLOR = Colors.grey[200]!;
final DARK_GREY_COLOR = Colors.grey[600]!;
final TEXTFIELD_FILL_COLOR = Colors.grey[300]!;

코드	역할	비고
PRIMARY_COLOR	앱의 대표 색상	주요 강조 색
LIGHT_GREY_COLOR	밝은 회색 배경 색	기본 UI 배경
DARK_GREY_COLOR	어두운 회색 텍스트 색	가독성
TEXTFIELD_FILL_COLOR	입력창 배경 색	TextField 등에 사용
### 새로 알게된 것

table_calendar 플러그인을 처음 사용해보았다. 쪽지시험 공부를 하면서 콜백함수가 이해가 가지 않았는데 이번 프로젝트에서 한번 더 사용하면서 콜백함수를 어떤 상황에서 사용할 수 있는지 알게되었다. 콜백함수는 부모가 함수를 전달하고 자식에서 예를 들어 클릭이 발생했을 때 부모 함수를 실행하는 것이라고 이해했다. 코드를 보면서 생각보다 짧은 코드로 달력을 구현했다는 것이 신기했다.

TableCalendar를 사용하여 간단하게 캘린더 UI 구현 가능

DateTime.utc : 시간대 영향을 제거하고 날짜만 정확하게 비교하기 위해 사용

헷갈리는 부분

언제 어떤 함수를 사용해야 적절할지가 헷갈린다. 그리고 플러터에서 들여쓰기할 때 쉼표를 쓰기도 하고 세미콜론으로 마치는 경우도 있는데 그것이 헷갈린다

결과물

[Flutter 5일차]

Tue, 14 Apr 2026 08:25:17 GMT

Flutter 복습

StatelessWidget

상태가 변하지 않음 build() : 화면 그리는 함수

StatefulWidget

상태가 변하는 위젯 -> 사용자의 조작, 시간에 따라 화면이 변해야함

HomeScreen(껍데기)

_HomeScreenState(실제 내용)

-> 클래스를 2개로 나눠 위젯을 효율적으로 관리함

앱 실행 흐름

main() : 시작점
runApp() : 실행 함수
*MaterialApp *: 앱 전체 감싸는 위젯
HomeScreen() : 첫 화면 지정

레이아웃 위젯 - 화면 배치

1. Column : 세로 배치 (위 -> 아래)

children : [] 여러 위젯을 받음

2. Row : 가로 배치 (왼쪽 -> 오른쪽)

mainAxis (주축)

start : 위로 몰아 배치
center : 가운데로 모아 배치
spaceBetween : 양끝에 붙이고 나머지 균등 분배
spaceEvenly : 모든 간격을 균등하게
spaceAround : 양쪽 끝 간격은 절반, 나머지 균등

crossAxis (교차축)

SizedBox : 여백 생성

(=> CSS의 padding, margin)

SafeArea : 안전 영역 확보(빈 공간)

ex) 노치(카메라 영역), 홈 인디케이터를 피해서 영역을 자동으로 피해서 내용을 배치

이미지 넣는 순서

폴더 만들기
- asset/image/ 폴더 생성 후 이미지 파일을 저장
pubspec.yaml 등록
```
flutter : 
 assets :
     - asset/img/
```
asset/img/ 폴더 안의 모든 파일 사용 가능 저장 후 Pub get
코드에서 사용
```
Image.asset('asset/img/image.jpg')
```

스타일 한 곳에서 관리 Theme.of(context).textTheme; => context : 위치 알려줌

[Flutter 4일차] / U_and_I

Thu, 09 Apr 2026 01:39:34 GMT

DateTime

: 날짜와 시간을 다루는 클래스 속성 : year, month, day, hour, minute, second...

D-Day() difference() : 두 날짜 차이 계산 inDays : 일 단위로 변환

정렬 옵션

bottomCenter : 아래 가운데
bottomLeft : 아래 왼쪽 ..

날짜 선택 시 firstDay 변경 onDateTimeChanged: (date) { setState(() { firstDay = date; }); } firstDay = firstDay.subtract(Duration(days: 1));

[Flutter 3일차]

Mon, 06 Apr 2026 11:43:10 GMT

Flutter 생명주기

createState() → initState() → build() createState() State 객체 생성 아직 UI 없음 initState() 초기 1회 실행 API 호출, 변수 초기화, listener 등록 build() UI를 그리는 함수 여러 번 호출됨 → 반드시 가볍게 유지해야 함 setState() → build() 버튼 클릭, 스와이프 등 이벤트 발생 setState() 호출 시 상태 변경 + rebuild 요청 dispose() 화면이 사라질 때 딱 한번 실행, 메모리 정리 필수 controller 해제, stream 종료, listener 제거

비동기처리

onPressed: () async { await Future.delayed(Duration(seconds: 2)); print("완료"); } 작업이 끝날 때까지 기다린 후 다음 코드 실행 showCupertinoDialog() iOS 스타일로 대화창을 띄우는 함수

BuildContext 위젯의 위치 정보 위젯 트리에서 현재 위치를 나타냄

StatelessWidget

한 번 만들어지면 절대 변하지 않음 UI가 고정 텍스트, 아이콘, 고정된 화면 데이터 변경이 없는 경우

StatefulWidget

값이 바뀌면 UI도 바뀜 내부에 State 객체 존재 setState() 사용 가능 버튼 클릭 입력값 변화 API 데이터 반영 애니메이션 효과

[Flutter 3일차] / image_carousel

Wed, 01 Apr 2026 13:06:04 GMT

위젯 생명주기

StatelessWidget
- 상태 없음
- 다시 그리려면 전체 새로 생성
- 고정UI, 아이콘
StatefulWidget
- 상태 있음
- 값이 바뀌면 화면 자동 변경
- 버튼 클릭, API 데이터, 웹뷰 로딩, 입력값

Pubspec.yaml -> 의존성 있는 것들 저장하는 파일

Key

: 위젯을 구분하기위한 아이디 => list, update할 떄 필요

BuildContext

: 위젯의 위젯 정보, 위치 알려줌

Scaffold

: 기본 뼈대

PageView

➡️ 여러개의 위젯을 단독 페이지로 생성하고 가로 또는 세로 스와이프로 페이지를 넘길 수 있게 하는 위젯

fit:BoxFit.contain -> 이미지가 잘리지 않는 선에서 최대한 크게 늘리기 fit:BoxFit.cover -> 부모 위젯 전체를 덮는 선에서 최소한 크기로 조절 fit:BoxFit.fill-> 이미지의 비율을 무시하고 부모 위젯의 이미지 비율대로 크기를 조절 fit:BoxFit.fitHeight-> 이미지의 비율을 유지한 채로 부모 위젯의 높이에 이미지의 높이를 맞춤 fit:BoxFit.fitWidth-> 이미지의 비율을 유지한 채로 부모 위젯의 높이에 이미지의 넓이를 맞춤 fit:BoxFit.none-> 원본 이미지 크기와 비율을 그대로 사용 fit:BoxFit.scaleDown-> BoxFit.none의 설정에 이미지를 중앙 정렬 + if (부모 위젯 < 이미지) 이미지 크기를 줄임

SystemChrome

: 시스템 UI를 제어하는 클래스 (상태바, 네비게이션바 등) setSystemUIOverlayStyle() -> 상태바 스타일 바꾸는 함수 예시 코드) SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark); // 상태바 아이콘을 어둡게 만듬

수업코드

image_carousel home_screen.dart

import 'package:flutter/material.dart'; //기본 라이브러리
import 'package:flutter/services.dart';
import 'dart:async';

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

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

class _HomeScreenState extends State {
  final PageController pageController = PageController();

  //initState() 함수 등록
  @override
  void initState() {
    super.initState();

    Timer.periodic(Duration(seconds: 3), (timer) {
      //1. 현재 페이지 가져오기
      int? nextPage = pageController.page?.toInt();
      //2. 페이지 값이 엇을 때 예외처fl
      if (nextPage == null) {
        return;
      }
      //3. 첫 페이지와 마지막 페이지 분기 처리
      if (nextPage == 4) {
        nextPage = 0;
      } else {
        nextPage++;
      }
      //4. 페이지 변경
      pageController.animateToPage(
        nextPage,
        duration: Duration(milliseconds: 500),
        curve: Curves.ease,
      );
    });


  }
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return Scaffold(
      body: PageView(
        controller: pageController,
        children: [1, 2, 3, 4, 5]
            .map(
              (number) =>
              Image.asset('asset/img/$number.jpg', fit: BoxFit.cover),
        )
            .toList(),
      ),
    );
  }
}

[Flutter 2일차] / blog_web_app

Mon, 30 Mar 2026 14:13:50 GMT

row : 가로 배치
colum : 세로 배치
callback 함수 : 나중에 실행되도록 다른 함수에 전달되는 함수
MaterialApp : flutter에 최상위의 위젯, MaterialApp안에 home 매개변수안에 입력하는 것
위젯 : 화면을 구성에 필요한 것들
Scaffold 위젯
- 상단바 : appBar
- 본문 
- 하단 버튼
- 네비게이션바
casecade operator : .. 연산자를 사용해서 특정 인스턴스의 속성이나 멤버 함수를 연속해서 사용할 수 있게 하는 연산자
build : 위젯 반환

➡️ 인터넷 권한

수업코드

home_screen.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class HomeScreen extends StatelessWidget {

  WebViewController webViewController = WebViewController()

  ..loadRequest(Uri.parse('http://blog.codefactory.ai'))

  ..setJavaScriptMode(JavaScriptMode.unrestricted);

  HomeScreen({Key? key}) : super (key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(
        backgroundColor: Colors.yellow,

        title: Text('다연쌤 최고'),
        centerTitle: true,

      ),
      body: WebViewWidget(
        controller: webViewController, //속성에 : 를 연결해야 웹 뷰
      )
    );
  }
}

main.dart

import 'package:blog_web_app/screen/home_screen.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: HomeScreen(),

    ),
  );
}

결과물

[Flutter 1일차]

Tue, 24 Mar 2026 15:21:07 GMT

데이터 타입
- var : 변수 타입을 처음에 추론해서 고정시킴
- dynamic : 변수 타입 변경 가능
- final(상수) : 런타임 상수 - 실행될 때 값이 확정
- const (상수) : 빌드 타임 상수 - 코드를 실행하지 않은 상태에서 값이 확정
- int / double / String / bool : 정수 / 실수 / 문자열 / 논리형 자료형
- Collection : 여러 값을 하나의 변수에 저장할 수 있는 타입입니다.
- List: 순서대로 저장
- Map : 특정 키 값을 기반으로 빠르게 값을 검색
- Set : 중복 값을 허용x
```
     .
```

키워드
- null 관련 연산자
- required : 네임드 파라미터에서 사용, 해당 값을 반드시 전달한다고 강제
  
  .
함수 정리
- main() {} : 메인 메소드
- print() : 출력 메소드
- reduce() : 값을 순회하면서 매개변수에 입력된 함수를 실행
- where() :
```
final illitList = iveList.where(
   (name) => name == '리즈' || name == '원영',
```
  이름이 리즈이거나 원영인것만 true로 남기고 나머지 탈락
```
);
```

위젯

자식을 하나만 갖는 위젯
1. Container : 자식을 담는 컨테이너 역할(배경색, 너비, 높이, 테두리 등 디자인)
2. GestureDetector : 플러터에서 제공하는제스처 기능을 자식 위젯에서 인식
3. SizeBox : 높이, 너비 지정하는 위젯 — 디자인 X,
자식을 여러 갖는 위젯
1. Colum : children 매개변수에 입력된 모든 위젯을 세로로 배치
2. Row : children 매개변수에 입력된 모든 위젯을 가로로 배치
3. ListView : 리스트를 구현할 때 사용 — 입력된 위젯이 화면을 벗어나게되면 스크롤 가능
Text() 위젯

함수

onPanStart : 수평 또는 수직 드래그가 시작되었을 때 함수 실행

onPanUpdate : 수평 또는 수직 드래그하는 동안 드래그 위치가 업데이트 될 때 마다 실행

onPanEnd : 수평 또는 수직 드래그가 끝났을 때 실행

onHorizontalDragStart : 수평드래그가 실행될 떄

onHorizontalDragUpdate : 수평드래그를 하는 동안

onHorizontalDragEnd : 수평드래그가 끝났을 때

onVerticalDragStart : 수직드래그가 시작할 때

onVerticalDragUpdate : 수직드래그를 하는 동안

onVerticalDragEnd : 수직드래그가 끝났을 때

onScaleStart : 확대가 시작됐을 때

onScaleUpdate : 확대가 진행되는 동안

onScaleEnd : 확대가 끝났을 때

ElevatedButton - 튀어나온 버튼

TextButton - 텍스트 버튼

IconButton - 아이콘 버튼

Border.all - 테두리

borderRadius - 둥글게

padding - 안쪽 여백

margin - 바깥쪽 여백

SizedBox - 크기 제한

SafeArea - 화면이 잘리지 않게 보호해주는 위젯

수업코드 사진

💻 컬러 선택으로 배경 바꾸기

Wed, 25 Feb 2026 17:57:39 GMT

🔽결과물🔽

우연히 short를 보다가 발견했다. HTML, CSS, JS로 간단하게 만들 수 있을 것 같아서 바로 시작했다.

HTML과 CSS는 방과후 수업에서 많이 접해봐서 익숙했다. JS는 접해본 경험이 몇번 없어서 이번 기회로 조금 더 학습하는 계기가 된 것 같다.

let은 JS에서 변수 선언을 하고 업데이트는 가능하지만, 재선언은 불가능한 블록 변수

🩵[HTML 4일차]

Mon, 08 Sep 2025 15:51:57 GMT

1️⃣
태그

학년

        

전화번호


> ![](https://velog.velcdn.com/images/ttt0_0/post/7600784e-5e15-4905-a508-b486b881b6e6/image.png)
![](https://velog.velcdn.com/images/ttt0_0/post/539243f3-2776-41c1-8329-6c91c81cfa62/image.png)

## 2️⃣ <태그>
> ```html
> - ✅  : 하나의 문단(블록 요소, 자동으로 줄바꿈)
- ✅ 
 : 줄바꿈
- ✅  : 주석 처리
- ✅  : HTML문서의 시작과 끝
- ✅ ,  : 인라인 요소 (공간이 부족하면 밑으로 줄바꿈)
- ✅  : 글씨 크기
- ✅  : container로 사용하는 태그 (의미X, CSS 적용시 레이아웃 나눔으로
디자인 다르게 적용)
- ✅  : 순서 있는 목록 (1.--- 2.--- 3.---)
- ✅  : 순서 없는 목록 (-... -... -...)
- ✅  : 목록 항목 (,  각 항목을 정의할 때 사용)
- ✅ home : 하이퍼링크 구문 
- ✅  : 이미지 삽입
- ✅  : 비밀번호 입력창 (····)
- ✅  : 숫자 하나씩 증가 또는 감소
- ✅  : 중복 선택 가능한 체크박스
- ✅  : 같은 lable로 묶었을 때 중복 선택 불가한 체크박스
- ✅  : 파일 가져오기
- ✅  : 제출 버튼
- ✅  : 초기화 버튼
- ✅ 성별 : lable로 태그 요소(input)를 묶음으로써 설명(연결하려는 속성 같게하기)
- ⭐️ required : 필수 입력
- ⭐️  : 전화번호 형식을 검사하는 pattern 속성 문법 (^ : 문자열 시작, [0-9]{4} : 0부터 9안에서 숫자 4자 $ : 문자열 끝)
- ⭐️ placeholder="010-1234-1234"> : 입력 예시

🩵[HTML 3일차]

Tue, 02 Sep 2025 14:56:03 GMT

1️⃣ 태그

        입력창
    패스워드 입력창 (입력내용 숨김)
        숫자 입력(증가 감소)
    중복 선택 가능
        중복 선택 불가
        파일 선택
        제출 버튼
        초기화 버튼

⭐️결과⭐️
  입력창
  패스워드 입력창 (입력내용 숨김)
 숫자 입력(증가 감소)
     중복 선택 가능
        중복 선택 불가
         파일 선택
       제출 버튼
        초기화 버튼

### 2️⃣ 적용
> ![](https://velog.velcdn.com/images/ttt0_0/post/38f4db38-6cee-4a62-a71b-a43048eeda47/image.png)

## 3️⃣ <태그>
> ```html
> - ✅  : 하나의 문단(블록 요소, 자동으로 줄바꿈)
- ✅ 
 : 줄바꿈
- ✅  : 주석 처리
- ✅  : HTML문서의 시작과 끝
- ✅ ,  : 인라인 요소 (공간이 부족하면 밑으로 줄바꿈)
- ✅  : 글씨 크기
- ✅  : container로 사용하는 태그 (의미X, CSS 적용시 레이아웃 나눔으로
디자인 다르게 적용)
- ✅  : 순서 있는 목록 (1.--- 2.--- 3.---)
- ✅  : 순서 없는 목록 (-... -... -...)
- ✅  : 목록 항목 (,  각 항목을 정의할 때 사용)
- ✅ home : 하이퍼링크 구문 
- ✅  : 이미지 삽입
- ⭐️  : 비밀번호 입력창 (····)
- ⭐️  : 숫자 하나씩 증가 또는 감소
- ⭐️  : 중복 선택 가능한 체크박스
- ⭐️  : 같은 lable로 묶었을 때 중복 선택 불가한 체크박스
- ⭐️  : 파일 가져오기
- ⭐️  : 제출 버튼
- ⭐️  : 초기화 버튼
- ⭐️ 성별 : lable로 태그 요소(input)를 묶음으로써 설명(연결하려는 속성 같게하기)

## 4️⃣ 활용
> ![](https://velog.velcdn.com/images/ttt0_0/post/3e8b699b-2be3-4668-bf75-fce53b1ea2d5/image.png)

🩵[HTML 2일차]

Thu, 28 Aug 2025 15:46:47 GMT

1️⃣ <태그>

- ✅  : 하나의 문단(블록 요소, 자동으로 줄바꿈)

✅
: 줄바꿈
✅ : 주석 처리
✅ : HTML문서의 시작과 끝
✅ , : 인라인 요소 (공간이 부족하면 밑으로 줄바꿈)

✅ : 글씨 크기

✅

: container로 사용하는 태그 (의미X, CSS 적용시 레이아웃 나눔으로 디자인 다르게 적용)

✅
1. ✅
  - : 목록 항목 (

🩵[HTML 1일차]

Wed, 27 Aug 2025 14:35:03 GMT

1️⃣HTML 기본 구조

```

2️⃣결과

3️⃣<태그>

-  : 하나의 문단(블록 요소, 자동으로 줄바꿈)

: 줄바꿈

: 주석 처리

: HTML문서의 시작과 끝

, : 인라인 요소 (공간이 부족하면 밑으로 줄바꿈)

: 글씨 크기

: container로 사용하는 태그 (의미X, CSS 적용시 레이아웃 나눔으로 디자인 다르게 적용)

1. - : 목록 항목 (

📚[MySQL 2~3일차]

Mon, 18 Aug 2025 13:59:28 GMT

1️⃣ 실습

✅ 별칭 지정("")

✅ DESC(내림차순)

✅ 별칭 지정("") + GROUP BY + HAVING

✅ COUNT()

✅ AVG() + 별칭 지정("") + GROUP BY

✅ GROUP BY + SUM()

✅ DISTINCT

✅ LIMIT

✅ USE + ORDER BY

✅ 평균 조회

✅ LIKE + __핑크

✅ LIKE + 우%

✅ IN

✅ OR

✅ BETWEEN ~ AND

✅ AND 연산자

📚[MySQL 1일차]

Sun, 17 Aug 2025 14:09:21 GMT

1️⃣ DB(Database)란?

DB란? 구조화된 정보나 데이터를 체계적으로 모아둔 집합체. 보통 컴퓨터 시스템에 전자적으로 저장되며, DBMS와 함께 사용될 때 데이터베이스 시스템이라고 부른다.

2️⃣ DBMS(Database Management System)란?

데이터베이스를 관리하고 운영하는 소프트웨어이다.

3️⃣ DB의 특징

데이터의 독립성: 데이터의 구조나 저장 방식이 변경되어도 응용 프로그램에는 영향을 주지 않음

통합된 데이터: 여러 곳에서 사용되던 데이터를 하나로 통합하여 저장
공용 데이터: 여러 사용자가 각각 다른 목적으로 데이터베이스의 데이터를 공동 이용함

4️⃣ 테이블

데이터베이스의 최소 단위로 하나 이상의 열과 행으로 구성 (표)

5️⃣ MySQL 예약어

SELECT -> 조회할 데이터 지정 FROM -> 테이블 지정 WHERE -> 조건문 (ORDER BY 절 앞에 배치) ORDER BY -> 정렬 (기본 값: 오름차순) ASC -> 오름차순 DESC -> 내림차순 CREATE -> 데이터베이스 개체 생성 DROP -> 데이터베이스 개체 삭제