imageUploadStory top-level property

Implementation

Story imageUploadStory = Story(
  name: 'Image Upload',
  builder: (context) {
    final imageShape = context.knobs.options<ImageContainerShape>(
      label: 'Image Shape',
      initial: ImageContainerShape.square,
      options: ImageContainerShape.values
          .map((shape) => Option(label: shape.name, value: shape))
          .toList(),
    );

    final uploadImageWidth = context.knobs.slider(
      label: 'Upload Image Width',
      initial: 195.0,
      min: 100.0,
      max: 300.0,
    );

    final uploadImageHeight = context.knobs.slider(
      label: 'Upload Image Height',
      initial: 195.0,
      min: 100.0,
      max: 300.0,
    );

    final imageWidth = context.knobs.slider(
      label: 'Image Width',
      initial: 195.0,
      min: 100.0,
      max: 300.0,
    );

    final imageHeight = context.knobs.slider(
      label: 'Image Height',
      initial: 185.0,
      min: 100.0,
      max: 300.0,
    );

    final maxImages = context.knobs
        .slider(
          label: 'Max Images',
          initial: 5.0,
          min: 1.0,
          max: 10.0,
        )
        .toInt();

    final maxImageDisplayed = context.knobs.sliderInt(
      label: 'Max Image Displayed',
      initial: 1,
      min: 1,
      max: 10,
    );

    final maxWidth = context.knobs.slider(
      label: 'Max Width',
      initial: 400.0,
      min: 200.0,
      max: 600.0,
    );

    final uploadIcon = context.knobs.options<IconData>(
      label: 'Upload Icon',
      initial: Icons.camera_alt_outlined,
      options: [
        Option(label: 'Camera', value: Icons.camera_alt_outlined),
        Option(label: 'Gallery', value: Icons.photo_library),
      ],
    );

    final uploadIconColor = context.knobs.options<Color>(
      label: 'Upload Icon Color',
      options: [
        Option(label: 'Grey', value: Colors.grey),
        Option(label: 'Black', value: Colors.black),
        Option(label: 'Red', value: Colors.red),
      ],
      initial: Colors.grey,
    );

    final uploadIconSize = context.knobs.slider(
      label: 'Upload Icon Size',
      initial: 40.0,
      min: 20.0,
      max: 60.0,
    );

    final text = context.knobs.text(
      label: 'Upload Text',
      initial: 'Add image',
    );

    final textColor = context.knobs.options<Color>(
      label: 'Text Color',
      options: [
        Option(label: 'Grey', value: Colors.grey),
        Option(label: 'Black', value: Colors.black),
        Option(label: 'Red', value: Colors.red),
      ],
      initial: Colors.grey,
    );

    final uploadedImageTopRightIcon = context.knobs.options<IconData>(
      label: 'Top Right Icon',
      initial: Icons.close,
      options: [
        Option(label: 'Close', value: Icons.close),
        Option(label: 'Remove', value: Icons.delete),
      ],
    );

    final uploadedImageTopRightIconColor = context.knobs.options<Color>(
      label: 'Top Right Icon Color',
      options: [
        Option(label: 'Black', value: Colors.black),
        Option(label: 'Red', value: Colors.red),
        Option(label: 'Green', value: Color(0xFF4CAF50)),
      ],
      initial: Colors.black,
    );
    final displayImageWithCount = context.knobs
        .boolean(label: 'Display Image With Count', initial: false);
    final removeOnlyRecentImage = context.knobs
        .boolean(label: 'Remove Only Recent Image', initial: false);

    return Center(
      child: DDSImageUpload(
        imageShape: imageShape,
        imageWidth: imageWidth,
        uploadImageHeight: uploadImageHeight,
        uploadImageWidth: uploadImageWidth,
        imageHeight: imageHeight,
        maxImages: maxImages,
        maxWidth: maxWidth,
        uploadIcon: uploadIcon,
        uploadIconColor: uploadIconColor,
        uploadIconSize: uploadIconSize,
        uploadText: text,
        textColor: textColor,
        maxImageDisplayed: maxImageDisplayed,
        removeOnlyRecentImage: removeOnlyRecentImage,
        displayImageWithCount: displayImageWithCount,
        uploadedImageTopRightIcon: uploadedImageTopRightIcon,
        uploadedImageTopRightIconColor: uploadedImageTopRightIconColor,
      ),
    );
  },
);