datePickerStory top-level property

Implementation

Story datePickerStory = Story(
  name: 'Date Picker',
  builder: (context) {
    final variant = context.knobs.options(
      label: 'Date Picker Variant',
      options: [
        Option(label: 'Basic', value: DatePickerVariant.basic),
        Option(label: 'Scrollable', value: DatePickerVariant.scrollable),
        Option(label: 'Slider', value: DatePickerVariant.slider),
      ],
      initial: DatePickerVariant.basic,
    );

    final buttonType = context.knobs.options(
      label: 'Date Picker Footer Button Variant',
      options: [
        Option(label: 'Filled', value: DatePickerFooterButtonType.filled),
        Option(label: 'Ghost', value: DatePickerFooterButtonType.ghost),
      ],
      initial: DatePickerFooterButtonType.filled,
    );

    final title =
        context.knobs.text(label: 'Date Picker Title', initial: 'Pick A Date');
    final cancelButtonText =
        context.knobs.text(label: 'Cancel Button Text', initial: 'Cancel');
    final okButtonText =
        context.knobs.text(label: 'Ok Button Text', initial: 'Set');

    // Function to show the date picker when the button is clicked
    void _showDatePicker() {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            contentPadding: EdgeInsets.all(0),
            content: Builder(
              builder: (BuildContext context) {
                final datePicker = DDSDatePicker(
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2000),
                  lastDate: DateTime(2100),
                  variant: variant,
                  footerButtonType: buttonType,
                  onConfirm: (date) {
                    print(date);
                  },
                  title: title,
                  cancelButtonText: cancelButtonText,
                  okButtonText: okButtonText,
                  onCancel: () {
                    print('cancel');
                  },
                );

                return Container(
                  width: MediaQuery.of(context).size.width * 0.9,
                  height: MediaQuery.of(context).size.height * 0.7,
                  child: datePicker,
                );
              },
            ),
          );
        },
      );
    }

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          onPressed: _showDatePicker,
          child: Text('Open Date Picker'),
        ),
      ],
    );
  },
);