Cộng đồng Hỏi & Đáp của Inflearn

import 'package:calendar_scheduler/component/custom_text_feild.dart';
import 'package:calendar_scheduler/const/colors.dart';
import 'package:calendar_scheduler/database/drift_database.dart';
import 'package:calendar_scheduler/model/category_color.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:calendar_scheduler/database/drift_database.dart';

class ScheduleBottomSheet extends StatefulWidget {    //form 3. StatefulWidget이어야한다.
  const ScheduleBottomSheet({Key? key}) : super(key: key);

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

class _ScheduleBottomSheetState extends State<ScheduleBottomSheet> {
  final GlobalKey<FormState> formKey = GlobalKey();      //form 4. formKey변수만들어준다.

  int? startTime;          //3개의 값을 반복적으로 사용하기 위해 저장을한다.
  int? endTime;
  String? content;
  int? selectedColorId;     //color를 id로 관리하기 위해 id값을 넣기 위해 변수를 만든다.

  @override
  Widget build(BuildContext context) {
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;   //키보드같은 시스템의 높이를 알 수 있음. 상하좌우 가능
    return GestureDetector(
      onTap: (){
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: SafeArea(
        child: Container(
          color: Colors.white,
          height: MediaQuery.of(context).size.height /2 + bottomInset,  //핸드폰 전체높이에 /2 절반
          child: Padding(
            padding: EdgeInsets.only(bottom: bottomInset),
            child: Padding(
              padding: EdgeInsets.only(left: 8.0, right: 8.0, top: 16.0),
              child: Form(               //form 2. _Time,_Content 이거 있는거 상위에 form을 해준다. key가 컨트롤러가 된다.
                key: formKey,             //form 5. formKey변수 넣어준다. 컨트롤러가 된다.
                autovalidateMode: AutovalidateMode.always,   //에러메시지를 실시간 표현해줌.
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _Time(
                      onStartSaved: (String? val){
                        startTime = int.parse(val!);     //String으로 값이 들어오니 int로 파싱 그걸 위에서 만든 변수에 넣는다.
                      },
                      onEndSaved: (String? val){
                        endTime = int.parse(val!);    //val이 값이 없으면 에러메시지뜨도록 했으니 값이 없을수 없다.
                      },
                    ),
                    SizedBox(height: 16.0,),
                    _Content(
                      onSaved: (String? val){
                        content = val;             //String이니 걍 넣는다.
                      },
                    ),
                    SizedBox(height: 16.0,),
                    FutureBuilder<List<CategoryColor>>(
                      future:  GetIt.I<LocalDatabase>().getCategoryColors(),
                        //디비가져오기 4 이페이지에서 디비값 가져올수 있게 세팅, LocalDatabase이거는 drift_database파일에서 import
                      builder: (context, snapshot) {
                        //print(snapshot.data);            //디비가져오기 5 디비에서 가져온 색깔 출력
                        if(snapshot.hasData && selectedColorId == null && snapshot.data!.isNotEmpty){
                          //if(데이터가 있고, selectedColorId를 클릭하지 않았음, 하나라도 값이 있거나)
                          selectedColorId = snapshot.data![0].id;    //0번째 빨강색으로 셀렉트 한다.
                        }
                        return _ColorPicker(
                          colors: snapshot.hasData ? snapshot.data! : [],
                          //디비가져오기 6 hasData 값이 있으면  .hasData 값이 없으면 : [] 걍 빈값을 보낸다.
                          selectedColorId: selectedColorId!,
                        );
                      }
                    ),
                    SizedBox(height: 8.0,),
                    _SaveButton(onPressed: onSavePressed,), //form 7 onSavePressed 함수 만든다.
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
  void onSavePressed(){
    if(formKey.currentState == null){  //현재 null이 나올수는 없으나 혹시나 null인경우 그냥 리턴해 버린다.
      return;
    }

    if(formKey.currentState!.validate()){   //form 8 에러가 없으면 null값을 리턴하면서 true
      print('에러 없음');
      formKey.currentState!.save();
      print('--------------------');
      print('startTime : $startTime');
      print('endTime : $endTime');
      print('content : $content');
    }else{
      print('에러 있음');
    }
  }
}
class _SaveButton extends StatelessWidget {
  final VoidCallback onPressed;
  const _SaveButton({required this.onPressed, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: ElevatedButton(
            onPressed: onPressed,     //form 6 외부로 보낼수 있게 required 만든다.
            style: ElevatedButton.styleFrom(
              primary: PRIMARY_COLOR,
            ),
            child: Text('저장'),
          ),
        ),
      ],
    );
  }
}

class _ColorPicker extends StatelessWidget {
  final List<CategoryColor> colors;             //디비가져오기 1.디비에 있는 칼라를 이걸로 가져올 거임
  final int selectedColorId;                  // 아이디 값을 받아준다.
  const _ColorPicker({
    required this.colors,
    required this.selectedColorId,
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8.0,                   //좌우간격
      runSpacing: 10.0,               //상하 간격
      children: colors.map((e) => renderColor(e, selectedColorId == e.id)).toList(),  //디비가져오기 2. colors값 렌더링하기 ->main에서 GetIt한다.
            //여기 e=<CategoryColor>
    );
  }
  Widget renderColor(CategoryColor color, bool isSelected){
    return Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Color(
              int.parse(
              'FF${color.hexCode}',          //hexCode 컬럼에 있는 값을 가져온다.
              radix: 16,                 //16진수로 표현한다.
          ),
        ),
        border: isSelected         //선택 되었을대 보더를 넣어준다.
          ? Border.all(
          color: Colors.black,
          width: 4.0,
          )
            : null,
      ),
      height: 32.0,
      width: 32.0,
    );
  }
}

class _Content extends StatelessWidget {
  final FormFieldSetter<String> onSaved;
  const _Content({required this.onSaved, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded( //1.텍스필드 꽉차게 다음은 custom_text_feild에
      child: CustomTextField(
        label: '내용',
        isTime: false,
        onSaved: onSaved,
      ),
    );
  }
}

class _Time extends StatelessWidget {
  final FormFieldSetter<String> onStartSaved;
  final FormFieldSetter<String> onEndSaved;
  const _Time({
    required this.onStartSaved,
    required this.onEndSaved,
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: CustomTextField(
            label: '시작시간',
            isTime: true,
            onSaved: onStartSaved,
          ),
        ),
        SizedBox(width: 8.0,),
        Expanded(
          child: CustomTextField(
            label: '종료시간',
            isTime: true,
            onSaved: onEndSaved,
          ),
        ),
      ],
    );
  }
}

초급 섹션 19. [프로젝트] [★★★★☆] 캘린더 스케쥴러에 > 색상 상태관리 강의 따라 하고 있습니다.

그런데 3:25초 부분에서 selectedColorId: selectedColorId!, 만 넣으면 아래 그림처럼 모달창이 안뜹니다. 몇번을 다시 하고 해봤는데 원인을 모르겠습니다.
schedule_bottom_sheet.dart 파일 입니다.