[flutter] CupertinoDatePicker를 활용하여 시간 선택

 

최근 프로젝트를 하나 하면서 시간을 선택하는 화면을 만들어야 하는데

블로그를 찾아봐도 내가 원하는 형태가 잘 나오지 않아서 이렇게 블로그를 작성하게 되었다

 

내가 만들고자 하는 형태!

 

이런 식으로 BottomSheet을 만들어서 사용자가 시간을 선택하게 하고 싶었다,,!

 

 

그래서 CupertinoDatePicker를 사용해보았다

 

기본적으로 코드는 이렇게 만들어주었다

Expanded(
              child: CupertinoDatePicker(
                mode: CupertinoDatePickerMode.time,
                use24hFormat: false,
                initialDateTime: DateTime.now(),
                onDateTimeChanged: (DateTime newDate){
                  final newTime = TimeOfDay(hour: newDate.hour, minute: newDate.minute);
                  selectedTimeNotifier.updateTime(newTime);
                },
              )
          )

 

CupertinoDatePicker를 활용하였고 

use24hFormat을 false로 하면 AM과 PM을 선택할 수 있다!

또한 initialDateTime은 현재로 해주었고 

상태관리는 riverpod을 활용해서 구현하였다

 

 

class SelectTimeProvider extends StateNotifier<TimeOfDay>{
  SelectTimeProvider() : super(TimeOfDay.now());

  void updateTime (TimeOfDay newTime){
    state = newTime;
  }
}

final selectedTimeProvider = StateNotifierProvider<SelectTimeProvider, TimeOfDay>((ref){
  return SelectTimeProvider();
});

 

 

그러고 이제 나는 BottomSheet에 뜨기를 원했기 때문에

이렇게 적용을 시켰다

 

IconButton(
                            onPressed: (){
                              showModalBottomSheet(
                                  context: context,
                                  isDismissible: false, // 바깥 클릭해도 닫히지 않음
                                  enableDrag: false,    // 스와이프로도 닫히지 않음
                                  builder: (BuildContext context){
                                    return TimepickerBottomSheet();
                                  },
                                  isScrollControlled: true
                              );
                            },
                            icon: SvgPicture.asset('assets/icon/bold/clock_circle_bold.svg',)
                        )

 

 

그래서 결론은 이렇게 구현이 되었다!

화면 기록 2024-09-11 오전 4.18.10.mov

1.11MB