flutter_date_time_picker/lib/src/date_time_picker.dart

import 'package:flutter/material.dart';
import 'package:flutter_date_time_picker/src/utils/date_time_picker_controller.dart';
import 'package:flutter_date_time_picker/src/widgets/month_date_time_picker.dart/month_date_time_picker_sheet.dart';
import 'package:flutter_date_time_picker/src/widgets/week_date_time_picker/week_date_time_picker_sheet.dart';

/// A widget that displays a date picker from a sheet form the top of the screen.
/// This sheet displays initialy displays a week of days but can be dragged down to show full months.
/// Both views can be dragged sideways to show the next or previous wweek/month.
///
/// The child will be the [Widget] that is displayed underneath the date picker in the stack.
///
/// The header [Widget] will be displayed above the date picker in the modal sheet in a column.
///
/// onTapDay is a callback that provides the taped date as a [DateTime] object.
///
/// highlightToday is a [bool] that determines which day shall we highlighted.
/// true will always highlight the current date. This is standard.
/// false will highlight the currently selected date by either the initial date or the one chosen by the user.
/// [highlighColor] is used as background for the highlighted day.
/// [toggleableActiveColor] is used for the text color when highlighted.
/// [disabledColor] is used for the text color when not highlighted.
///
/// markedDates contain the dates [DateTime] that will be marked in the picker by a small dot.
/// [indicatorColor] is used for the color of the dot.
///
/// Example:
/// ```dart
/// ShellDatePicker(
///   initialDate: selectedDate,
///   highlightToday: false,
///   onTapDay: (date) {
///     setState(() {
///       selectedDate = date;
///     });
///   },
///   markedDates: [
///     DateTime(2022, 7, 22),
///   ],
///   header: Container(
///     height: 100,
///     width: MediaQuery.of(context).size.width,
///     padding: const EdgeInsets.only(bottom: 10),
///     child: Row(
///       crossAxisAlignment: CrossAxisAlignment.end,
///       mainAxisAlignment: MainAxisAlignment.center,
///       children: [
///         const SizedBox(
///           width: 160,
///           height: 34,
///           child: Center(
///             child: Text(
///               'Persoonlijk',
///               style: TextStyle(
///                 fontSize: 16,
///                 fontWeight: FontWeight.w900,
///               ),
///             ),
///           ),
///         ),
///         const SizedBox(
///           width: 4,
///         ),
///         Container(
///           width: 160,
///           height: 34,
///           decoration: BoxDecoration(
///             color: const Color(0xFF00273D),
///             borderRadius: const BorderRadius.all(
///               Radius.circular(10),
///             ),
///             boxShadow: [
///               BoxShadow(
///                 color: const Color(0xFF000000).withOpacity(0.50),
///                 offset: const Offset(0, 6),
///                 blurRadius: 9,
///               ),
///             ],
///           ),
///           child: const Center(
///             child: Text(
///               'Teamplanning',
///               style: TextStyle(
///                 color: Colors.white,
///                 fontSize: 16,
///                 fontWeight: FontWeight.w900,
///               ),
///             ),
///           ),
///         ),
///       ],
///     ),
///   ),
///   child: Container(
///     margin: const EdgeInsets.only(
///       top: 195,
///     ),
///     child: ShellRoster(
///       startHour: 0,
///       endHour: 24,
///       blocks: [
///         for (Map<String, TimeOfDay> block in blocks) ...[
///           getBlock(block),
///         ],
///       ],
///     ),
///   ),
/// ),
///```
class DateTimePicker extends StatefulWidget {
  const DateTimePicker({
    required this.child,
    this.header,
    this.onTapDay,
    this.highlightToday = true,
    this.initialDate,
    this.markedDates,
    Key? key,
  }) : super(key: key);

  final Widget child;
  final Widget? header;
  final Function(DateTime)? onTapDay;
  final bool highlightToday;
  final DateTime? initialDate;
  final List<DateTime>? markedDates;

  @override
  State<StatefulWidget> createState() => _DateTimePickerState();
}

class _DateTimePickerState extends State<DateTimePicker> {
  late DateTimePickerController _dateTimePickerController;

  @override
  void initState() {
    super.initState();

    _dateTimePickerController = DateTimePickerController(
      highlightToday: widget.highlightToday,
      header: widget.header,
      markedDates: widget.markedDates,
      onTapDayCallBack: widget.onTapDay,
      browsingDate: widget.initialDate ?? DateTime.now(),
      selectedDate: widget.initialDate ?? DateTime.now(),
    );

    _dateTimePickerController.addListener(() {
      print('BROWSING DATE: ${_dateTimePickerController.browsingDate}');
      print('SELECTED DATE: ${_dateTimePickerController.selectedDate}');
      setState(() {});
    });
  }

  @override
  void dispose() {
    _dateTimePickerController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        widget.child,
        RotatedBox(
          quarterTurns: 2,
          child: DraggableScrollableSheet(
            controller: _dateTimePickerController.getDragController(),
            snap: true,
            minChildSize: 0.26,
            initialChildSize: 0.26,
            maxChildSize: 0.68,
            builder: (context, scrollController) {
              return RotatedBox(
                quarterTurns: 2,
                child: Stack(
                  children: [
                    SingleChildScrollView(
                      physics: const ClampingScrollPhysics(),
                      reverse: true,
                      controller: scrollController,
                      child: Padding(
                        padding: const EdgeInsets.only(bottom: 12.5),
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: const BorderRadius.only(
                              bottomLeft: Radius.circular(20),
                              bottomRight: Radius.circular(20),
                            ),
                            boxShadow: [
                              BoxShadow(
                                blurRadius: 5,
                                color: Colors.black.withOpacity(0.2),
                              ),
                            ],
                          ),
                          child: _dateTimePickerController
                                      .getDragController()
                                      .size <
                                  0.3
                              ? WeekDateTimePickerSheet(
                                  dateTimePickerController:
                                      _dateTimePickerController,
                                )
                              : MonthDateTimePickerSheet(
                                  dateTimePickerController:
                                      _dateTimePickerController,
                                ),
                        ),
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}