progressStory top-level property

Implementation

Story progressStory = Story(
    name: 'Progress Indicator',
    builder: (BuildContext context) {
      final knobs = context.knobs;
      final ValueNotifier<bool> indeterminateNotifier =
          ValueNotifier<bool>(true);
      final ValueNotifier<bool> showProgressNotifier =
          ValueNotifier<bool>(true);
      final ValueNotifier<int> durationNotifier = ValueNotifier<int>(3);

      return StatefulBuilder(
        builder: (BuildContext context, StateSetter setState) {
          final variant = knobs.options(
            label: 'Variant',
            options: [
              Option(label: 'Linear', value: ProgressIndicatorVariant.linear),
              Option(
                  label: 'Circular', value: ProgressIndicatorVariant.circular),
              Option(
                  label: 'Discrete', value: ProgressIndicatorVariant.discrete),
            ],
            initial: ProgressIndicatorVariant.linear,
          );

          final textVariant = knobs.options(
            label: 'Text Variant',
            options: [
              Option(label: 'Done', value: DiscreteProgressTextVariant.done),
              Option(label: 'Fraction', value: DiscreteProgressTextVariant.fraction),
              Option(label: 'Percentage', value: DiscreteProgressTextVariant.percentage),
            ],
            initial: DiscreteProgressTextVariant.done,
          );

          final indeterminate = knobs.boolean(
            label: 'Indeterminate',
            initial: indeterminateNotifier.value,
          );
          final showProgress = knobs.boolean(
            label: 'Show Progress',
            initial: showProgressNotifier.value,
          );
          if (indeterminate != indeterminateNotifier.value) {
            indeterminateNotifier.value = indeterminate;
          }

          final valueColor = knobs.options<Color>(
            label: 'Value Color',
            options: [
              Option(label: 'Red', value: Colors.red),
              Option(label: 'Green', value: Colors.green),
              Option(label: 'Blue', value: Colors.blue),
              Option(label: 'Primary', value: ThemeColors.primary),
            ],
            initial: ThemeColors.primary,
          );

          final duration = knobs.sliderInt(
            label: 'Duration',
            initial: durationNotifier.value,
            min: 1,
            max: 10,
          );
          if (duration != durationNotifier.value) {
            durationNotifier.value = duration;
          }

          final backgroundColor = knobs.options<Color>(
            label: 'Background Color',
            options: [
              Option(label: 'Red', value: Colors.red),
              Option(label: 'Green', value: Colors.green),
              Option(label: 'Blue', value: Colors.blue),
              Option(label: 'Default', value: const Color(0xFFFACDBE)),
            ],
            initial: const Color(0xFFFACDBE),
          );

          final borderRadius = knobs.options<BorderRadius>(
            label: 'Border Radius',
            options: [
              Option(label: '0', value: BorderRadius.zero),
              Option(label: '6', value: BorderRadius.all(Radius.circular(6))),
              Option(label: '10', value: BorderRadius.all(Radius.circular(10))),
              Option(
                  label: '100', value: BorderRadius.all(Radius.circular(100))),
            ],
            initial: const BorderRadius.all(Radius.circular(6)),
          );

          final currentValue = context.knobs.sliderInt(
            label: 'Steps Completed',
            min: 0,
            max: 100,
            initial: 8,
          );
          final totalValue = context.knobs.sliderInt(
            label: 'Total Steps',
            min: 1,
            max: 100,
            initial: 10,
          );

          final size = knobs.slider(
            label: 'Size',
            initial: 20,
            min: 10,
            max: 100,
          );
          final thickness = knobs.slider(
            label: 'Thickness',
            initial: 1,
            min: 1,
            max: 100,
          );

          return Center(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: ValueListenableBuilder<bool>(
                valueListenable: indeterminateNotifier,
                builder: (context, indeterminateValue, child) {
                  return ValueListenableBuilder<int>(
                    valueListenable: durationNotifier,
                    builder: (context, durationValue, child) {
                      return Row(
                        children: [
                          Expanded(
                            child: DDSProgressIndicator(
                              key: ValueKey(
                                  'progress-$durationValue-$indeterminateValue'),
                              variant: variant,
                              indeterminate: indeterminateValue,
                              valueColor: valueColor,
                              duration: Duration(seconds: durationValue),
                              backgroundColor: backgroundColor,
                              totalValue: totalValue,
                              currentValue: currentValue,
                              size: size,
                              thickness: thickness,
                              borderRadius: borderRadius,
                              showProgress: showProgress,
                              textVariant: textVariant,
                            ),
                          ),
                        ],
                      );
                    },
                  );
                },
              ),
            ),
          );
        },
      );
    });