timePickerStory top-level property

Implementation

Story timePickerStory = Story(
  name: 'Time Picker',
  builder: (BuildContext context) {
    final variant = context.knobs.options(
      label: 'Time Picker Variant',
      options: [
        Option(label: 'Input', value: TimePickerVariant.input),
        Option(label: 'Dial', value: TimePickerVariant.dial),
        Option(label: 'Spinner', value: TimePickerVariant.spinner),
      ],
      initial: TimePickerVariant.input,
    );

    final title = context.knobs.text(
      label: 'Time Picker Title',
      initial: 'Select Time',
    );

    final cancelButtonText = context.knobs.text(
      label: 'Cancel Button Text',
      initial: 'Cancel',
    );

    final okButtonText = context.knobs.text(
      label: 'Ok Button Text',
      initial: 'Set',
    );

    final accentColor = context.knobs.options(
      label: 'Accent Color',
      options: [
        Option(
          label: 'Primary',
          value: ThemeColors.primary,
        ),
        Option(
          label: 'Red',
          value: Colors.red,
        ),
        Option(
          label: 'Blue',
          value: Colors.blue,
        ),
        Option(
          label: 'Green',
          value: Colors.green,
        ),
        Option(
          label: 'Purple',
          value: Colors.purple,
        ),
      ],
      initial: ThemeColors.primary,
    );

    return Material(
      child: Builder(
        builder: (BuildContext innerContext) {
          void _showTimePicker() {
            showDialog(
              context: innerContext,
              useRootNavigator: true,
              barrierDismissible: true,
              builder: (BuildContext dialogContext) {
                final screenSize = MediaQuery.of(dialogContext).size;

                return Center(
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      maxWidth: _getMaxWidth(variant),
                      maxHeight: _getMaxHeight(variant, screenSize.height),
                    ),
                    child: Dialog(
                      insetPadding: EdgeInsets.zero,
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 24),
                        child: DDSTimePicker(
                          spinnerWidth: 400,
                          dateColumnWidth: 200,
                          timeColumnWidth: 50,
                          initialTime: TimeOfDay.now(),
                          initialDate: DateTime.now(),
                          variant: variant,
                          title: title,
                          cancelButtonText: cancelButtonText,
                          okButtonText: okButtonText,
                          onDateChanged: (date) {
                            print('Selected date: $date');
                          },
                          accentColor: accentColor,
                          firstDate: DateTime.now()
                              .subtract(const Duration(days: 365)),
                          lastDate:
                              DateTime.now().add(const Duration(days: 365)),
                        ),
                      ),
                    ),
                  ),
                );
              },
            );
          }

          return Container(
            padding: const EdgeInsets.all(24),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _showTimePicker,
                  child: const Text('Open Time Picker'),
                ),
              ],
            ),
          );
        },
      ),
    );
  },
);