Custom Date Picker 만들기(2)

저번 포스팅에서 date_picker 위젯을 만들어 보았는데 위젯으로 사용해서 쓰기에는 선택한 DateTime을 리턴 받기 위해서는 Function을 만들어서 parameter를 넣어서 보내주거나 상태관리를 사용해야 했었습니다.

저는 이 datepicker를 pub dev에 publish할 계획이기 때문에 범용성이 조금 떨어진다 생각해서 dialog나 bottomSheet로 만들어서 거기서 선택하고 확인 버튼을 누르면 DateTime을 리턴받는 형식으로 바꾸었습니다.

먼저 결과물을 먼저 보여드리면

위처럼 바텀시트 혹은 다이얼로그로 사용하게 만들었습니다.

사용시 코드 예시는

import 'package:carousel/pages/datepicker/date_picker.dart';
import 'package:carousel/pages/datepicker/date_picker_widget_temp.dart';
import 'package:flutter/material.dart';

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

  @override
  State<DatePickerPage> createState() => _DatePickerPageState();
}

class _DatePickerPageState extends State<DatePickerPage> {
  List<DateTime> eachDateTime = [];
  DateTimeRange? rangeDateTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Custom Date Picker',
        ),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            ...List.generate(
              eachDateTime.length,
              (index) => Text(
                eachDateTime[index].toString().substring(0, 10),
              ),
            ),
            ElevatedButton(
              onPressed: () async {
                var result = await showDialog(
                  context: context,
                  builder: (context) => Dialog(
                    insetPadding: EdgeInsets.symmetric(
                      horizontal: 20,
                    ),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.vertical(
                        top: Radius.circular(20),
                        bottom: Radius.circular(20),
                      ),
                    ),
                    child: DatePickerWidgetTemp(
                      returnDateType: ReturnDateType.each,
                      initialDateList: eachDateTime,
                      contrastMode: ContrastMode.white,
                      rangeColor: Colors.grey.withOpacity(.3),
                    ),
                  ),
                );
                if (result != null && result is List<DateTime>) {
                  setState(() {
                    eachDateTime.clear();
                    eachDateTime.addAll(result);
                  });
                }
              },
              child: Text('Dialog Example'),
            ),
            SizedBox(
              height: 20,
            ),
            ElevatedButton(
              onPressed: () async {
                var result = await showModalBottomSheet(
                  isScrollControlled: true,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(20),
                      bottom: Radius.zero,
                    ),
                  ),
                  context: context,
                  builder: (context) => DatePickerWidgetTemp(
                    returnDateType: ReturnDateType.range,
                    initialDateRange: rangeDateTime,
                    contrastMode: ContrastMode.dark,
                    rangeColor: Colors.grey.withOpacity(.3),
                  ),
                );
                if (result != null) {
                  setState(() {
                    rangeDateTime = result;
                  });
                }
              },
              child: Text('Bottom Sheet Example'),
            ),
            Text(rangeDateTime == null
                ? ''
                : '${rangeDateTime!.start.toString().substring(0, 10)} ~ ${rangeDateTime!.end.toString().substring(0, 10)}')
          ],
        ),
      ),
    );
  }
}

이렇게 구성되어있습니다.

날릴수 있는 파라미터들로는

final ReturnDateType returnDateType;
final List? initialDateList;
final DateTimeRange? initialDateRange;
final Color selectedColor;
final Color rangeColor;
final Color? selectedFontColor;
final CalenderThema calenderThema;
final BorderRadius borderRadius;
final Color buttonColor;
final String buttonText;
final Color buttonTextColor;

이렇게 구성되어 있습니다.

사용자가 임의대로 커스텀할 구실을 많이 넣어주다보니 조건식이 조금 많아져서 코드가 조금 어지러워졌습니다.. datepicker 코드는 다음 포스팅에서 정리해서 다음 포스팅에 pub dev에 publish 하는 것과 함께 다뤄보겠습니다.