loaderStory top-level property

Implementation

Story loaderStory = Story(
  name: 'Loaders',
  builder: (context) {
    final loaderType = context.knobs.options<LoaderType>(
      label: 'Loader Type',
      options: [
        Option(label: 'Dot Loader', value: LoaderType.dotLoader),
        Option(label: 'Line Loader', value: LoaderType.lineLoader),
        Option(label: 'Round Spinner', value: LoaderType.roundSpinner),
        Option(label: 'Line Spinner', value: LoaderType.lineSpinner),
        Option(label: 'Dot Spinner', value: LoaderType.dotSpinner),
      ],
      initial: LoaderType.dotLoader,
    );

    String dotLoaderSize = 'medium';
    Color dotLoaderColor = ThemeColors.primary;
    String? dotLoaderText;
    Color? dotLoaderTextColor;

    double lineLoaderHeight = 10.0;
    double lineLoaderWidth = 50.0;
    Color lineLoaderBackgroundColor = const Color.fromRGBO(255, 240, 235, 1);
    Color lineLoaderStripeColor = const Color.fromRGBO(241, 90, 41, 1.0);
    Duration lineLoaderAnimationDuration = const Duration(milliseconds: 1000);
    String? lineLoaderText;
    Color? lineLoaderTextColor;

    Color roundSpinnerColor = ThemeColors.primary;
    String roundSpinnerSize = 'medium';
    String? roundSpinnerText;
    Color? roundSpinnerTextColor;

    Color lineSpinnerColor = ThemeColors.primary;
    String lineSpinnerSize = 'medium';
    String? lineSpinnerText;
    Color? lineSpinnerTextColor;

    Color dotSpinnerColor = ThemeColors.primary;
    String dotSpinnerSize = 'medium';
    String? dotSpinnerText;
    Color? dotSpinnerTextColor;

    switch (loaderType) {
      case LoaderType.dotLoader:
        dotLoaderSize = context.knobs.options<String>(
          label: 'Dot Loader Size',
          options: [
            Option(label: 'Small', value: 'small'),
            Option(label: 'Medium', value: 'medium'),
            Option(label: 'Large', value: 'large'),
            Option(label: 'Extra Large', value: 'extraLarge'),
          ],
          initial: 'medium',
        );

        dotLoaderColor = context.knobs.options<Color>(
          label: 'Dot Loader Color',
          options: [
            Option(label: 'Primary', value: ThemeColors.primary),
            Option(label: 'Secondary', value: Color(0xFF4CAF50)),
            Option(label: 'Accent', value: Color(0xFF4CAF50)),
          ],
          initial: ThemeColors.primary,
        );

        dotLoaderText = context.knobs.text(
          label: 'Dot Loader Text',
          initial: 'Loading...',
        );

        dotLoaderTextColor = context.knobs.options<Color>(
          label: 'Dot Loader Text Color',
          options: [
            Option(label: 'Primary', value: ThemeColors.primary),
            Option(label: 'Secondary', value: Color(0xFF4CAF50)),
            Option(label: 'Accent', value: Color(0xFF2196F3)),
          ],
          initial: ThemeColors.primary,
        );
        break;

      case LoaderType.lineLoader:
        lineLoaderHeight = context.knobs.slider(
          label: 'Line Loader Height',
          initial: 10.0,
          min: 5.0,
          max: 50.0,
          // divisions: 9,
        );

        lineLoaderWidth = context.knobs.slider(
          label: 'Line Loader Width',
          initial: 50.0,
          min: 20.0,
          max: 200.0,
          // divisions: 18,
        );

        lineLoaderBackgroundColor = context.knobs.options<Color>(
          label: 'Line Loader Background Color',
          options: [
            Option(label: 'Light Grey', value: Colors.grey[200]!),
            Option(label: 'Grey', value: Colors.grey),
            Option(label: 'Dark Grey', value: Colors.grey[800]!),
          ],
          initial: Colors.grey[200]!,
        );

        lineLoaderStripeColor = context.knobs.options<Color>(
          label: 'Line Loader Stripe Color',
          options: [
            Option(label: 'Primary', value: ThemeColors.primary),
            Option(label: 'Secondary', value: Color(0xFF4CAF50)),
            Option(label: 'Accent', value: Color(0xFF2196F3)),
          ],
          initial: ThemeColors.primary,
        );

        // lineLoaderAnimationDuration = Duration(
        //   milliseconds: context.knobs.slider(
        //     label: 'Line Loader Animation Duration',
        //     initial: 1000.0,
        //     min: 500.0,
        //     max: 300000.0,
        //   ).toInt(),
        // );

        lineLoaderText = context.knobs.text(
          label: 'Line Loader Text',
          initial: 'Loading...',
        );

        lineLoaderTextColor = context.knobs.options<Color>(
          label: 'Line Loader Text Color',
          options: [
            Option(label: 'Primary', value: ThemeColors.primary),
            Option(label: 'Secondary', value: Color(0xFF4CAF50)),
            Option(label: 'Accent', value: Color(0xFF2196F3)),
          ],
          initial: ThemeColors.primary,
        );
        break;

      case LoaderType.roundSpinner:
        roundSpinnerColor = context.knobs.options<Color>(
          label: 'Round Spinner Color',
          options: [
            Option(label: 'Primary', value: ThemeColors.primary),
            Option(label: 'Secondary', value: Color(0xFF4CAF50)),
            Option(label: 'Accent', value: Color(0xFF2196F3)),
          ],
          initial: ThemeColors.primary,
        );

        roundSpinnerSize = context.knobs.options<String>(
          label: 'Round Spinner Size',
          options: [
            Option(label: 'Small', value: 'small'),
            Option(label: 'Medium', value: 'medium'),
            Option(label: 'Large', value: 'large'),
            Option(label: 'Extra Large', value: 'extraLarge'),
          ],
          initial: 'medium',
        );

        roundSpinnerText = context.knobs.text(
          label: 'Round Spinner Text',
          initial: 'Loading...',
        );

        roundSpinnerTextColor = context.knobs.options<Color>(
          label: 'Round Spinner Text Color',
          options: [
            Option(label: 'Primary', value: ThemeColors.primary),
            Option(label: 'Secondary', value: Color(0xFF4CAF50)),
            Option(label: 'Accent', value: Color(0xFF2196F3)),
          ],
          initial: ThemeColors.primary,
        );
        break;

      case LoaderType.lineSpinner:
        lineSpinnerColor = context.knobs.options<Color>(
          label: 'Line Spinner Color',
          options: [
            Option(label: 'Primary', value: ThemeColors.primary),
            Option(label: 'Secondary', value: Color(0xFF4CAF50)),
            Option(label: 'Accent', value: Color(0xFF2196F3)),
          ],
          initial: ThemeColors.primary,
        );

        lineSpinnerSize = context.knobs.options<String>(
          label: 'Line Spinner Size',
          options: [
            Option(label: 'Small', value: 'small'),
            Option(label: 'Medium', value: 'medium'),
            Option(label: 'Large', value: 'large'),
            Option(label: 'Extra Large', value: 'extraLarge'),
          ],
          initial: 'medium',
        );

        lineSpinnerText = context.knobs.text(
          label: 'Line Spinner Text',
          initial: 'Loading...',
        );

        lineSpinnerTextColor = context.knobs.options<Color>(
          label: 'Line Spinner Text Color',
          options: [
            Option(label: 'Primary', value: ThemeColors.primary),
            Option(label: 'Secondary', value: Color(0xFF4CAF50)),
            Option(label: 'Accent', value: Color(0xFF2196F3)),
          ],
          initial: ThemeColors.primary,
        );
        break;

      case LoaderType.dotSpinner:
        dotSpinnerColor = context.knobs.options<Color>(
          label: 'Dot Spinner Color',
          options: [
            Option(label: 'Primary', value: ThemeColors.primary),
            Option(label: 'Secondary', value: Color(0xFF4CAF50)),
            Option(label: 'Accent', value: Color(0xFF2196F3)),
          ],
          initial: ThemeColors.primary,
        );

        dotSpinnerSize = context.knobs.options<String>(
          label: 'Dot Spinner Size',
          options: [
            Option(label: 'Small', value: 'small'),
            Option(label: 'Medium', value: 'medium'),
            Option(label: 'Large', value: 'large'),
            Option(label: 'Extra Large', value: 'extraLarge'),
          ],
          initial: 'medium',
        );

        dotSpinnerText = context.knobs.text(
          label: 'Dot Spinner Text',
          initial: 'Loading...',
        );

        dotSpinnerTextColor = context.knobs.options<Color>(
          label: 'Dot Spinner Text Color',
          options: [
            Option(label: 'Primary', value: ThemeColors.primary),
            Option(label: 'Secondary', value: Color(0xFF4CAF50)),
            Option(label: 'Accent', value: Color(0xFF2196F3)),
          ],
          initial: ThemeColors.primary,
        );
        break;
    }

    return Center(
      child: DDSLoader(
        loaderType: loaderType,
        dotLoaderSize: dotLoaderSize,
        dotLoaderColor: dotLoaderColor,
        dotLoaderText: dotLoaderText,
        dotLoaderTextColor: dotLoaderTextColor,
        lineLoaderHeight: lineLoaderHeight,
        lineLoaderWidth: lineLoaderWidth,
        lineLoaderBackgroundColor: lineLoaderBackgroundColor,
        lineLoaderStripeColor: lineLoaderStripeColor,
        lineLoaderAnimationDuration: lineLoaderAnimationDuration,
        lineLoaderText: lineLoaderText,
        lineLoaderTextColor: lineLoaderTextColor,
        roundSpinnerColor: roundSpinnerColor,
        roundSpinnerSize: roundSpinnerSize,
        roundSpinnerText: roundSpinnerText,
        roundSpinnerTextColor: roundSpinnerTextColor,
        lineSpinnerColor: lineSpinnerColor,
        lineSpinnerSize: lineSpinnerSize,
        lineSpinnerText: lineSpinnerText,
        lineSpinnerTextColor: lineSpinnerTextColor,
        dotSpinnerColor: dotSpinnerColor,
        dotSpinnerSize: dotSpinnerSize,
        dotSpinnerText: dotSpinnerText,
        dotSpinnerTextColor: dotSpinnerTextColor,
      ),
    );
  },
);