imageViewerStory top-level property

Implementation

Story imageViewerStory = Story(
  name: 'Image Viewer',
  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 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 maxImageDisplayed = context.knobs.sliderInt(
      label: 'Max Images Displayed',
      initial: 2,
      min: 1,
      max: 5,
    );

    final displayImageWithCount =
        context.knobs.boolean(label: 'Display Image With Count', initial: true);

    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),
        Option(label: 'Full Screen', value: Icons.fullscreen),
        Option(label: 'Close Full Screen', value: Icons.close_fullscreen),
      ],
    );

    final uploadedImageTopRightIconAction = context.knobs.options<ImageIconAction>(
      label: 'Top Right Icon Action',
      initial: ImageIconAction.remove,
      options: [
        Option(label: 'View Image Action', value: ImageIconAction.view),
        Option(label: 'Remove', value: ImageIconAction.remove),
      ],
    );

    final uploadedImageTopRightIconColor = context.knobs.options<Color>(
      label: 'Delete 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 removeOnlyRecentImage = context.knobs
        .boolean(label: 'Remove Only Recent Image', initial: false);

    final nextIcon = context.knobs.options<IconData>(
      label: 'Next Icon',
      initial: Icons.chevron_right,
      options: [
        Option(label: 'Chevron Right', value: Icons.chevron_right),
        Option(label: 'Arrow Forward', value: Icons.arrow_forward),
        Option(label: 'Arrow Right', value: Icons.arrow_right),
      ],
    );

    final previousIcon = context.knobs.options<IconData>(
      label: 'Previous Icon',
      initial: Icons.chevron_left,
      options: [
        Option(label: 'Chevron Left', value: Icons.chevron_left),
        Option(label: 'Arrow Back', value: Icons.arrow_back),
        Option(label: 'Arrow Left', value: Icons.arrow_left),
      ],
    );

    final shrinkIcon = context.knobs.options<IconData>(
      label: 'Close Viewer Icon',
      initial: Icons.close_fullscreen,
      options: [
        Option(label: 'Close Fullscreen', value: Icons.close_fullscreen),
        Option(label: 'Close', value: Icons.close),
        Option(label: 'Exit', value: Icons.exit_to_app),
      ],
    );

    final imageViewerBackgroundColor = context.knobs.options<Color>(
      label: 'Viewer Background Color',
      options: [
        Option(label: 'Transparent Black', value: Colors.black.withOpacity(0)),
        Option(label: 'Black', value: Colors.black),
        Option(label: 'Gray', value: Colors.grey.shade900),
      ],
      initial: Colors.black.withOpacity(0),
    );

    void onRemoveImage(int index) {
      ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Removed image at index $index')));
    }

    void onDeletePressed(ImageData imageData, int index) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Delete pressed for image: ${imageData.id} at index: $index'),
        ),
      );
    }

    return FutureBuilder<List<ImageData>>(
      future: _loadSampleImageData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        }

        if (snapshot.hasError) {
          return Center(
            child: Text('Error loading images: ${snapshot.error}'),
          );
        }

        if (!snapshot.hasData || snapshot.data!.isEmpty) {
          return Center(child: Text('No images available'));
        }

        final sampleImageData = snapshot.data!;

        return Scaffold(
          body: SingleChildScrollView(
            padding: EdgeInsets.all(16),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 650,
                  padding: EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey.shade300),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: DDSImageViewer(
                    images: sampleImageData,
                    onRemoveImage: onRemoveImage,
                    onDeletePressed: onDeletePressed,
                    uploadedImageTopRightIconAction: uploadedImageTopRightIconAction,
                    uploadedImageTopRightIcon: uploadedImageTopRightIcon,
                    imageShape: imageShape,
                    imageWidth: imageWidth,
                    imageHeight: imageHeight,
                    displayImageWithCount: displayImageWithCount,
                    maxImageDisplayed: maxImageDisplayed,
                    uploadedImageTopRightIconColor: uploadedImageTopRightIconColor,
                    removeOnlyRecentImage: removeOnlyRecentImage,
                    nextIcon: Icon(nextIcon, color: Colors.white, size: 40),
                    previousIcon: Icon(previousIcon, color: Colors.white, size: 40),
                    shrinkIcon: Icon(shrinkIcon, color: Colors.white, size: 20),
                    imageViewerBackgroundColor: imageViewerBackgroundColor,
                    imageViewerPadding: EdgeInsets.all(10),
                    shrinkButtonAlignment: Alignment.topRight,
                  ),
                ),
                SizedBox(height: 20),
                Text(
                  'Sample Images (${sampleImageData.length}):',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 10),
                ...sampleImageData.asMap().entries.map((entry) {
                  final index = entry.key;
                  final imageData = entry.value;
                  return Card(
                    margin: EdgeInsets.symmetric(vertical: 4),
                    child: ListTile(
                      leading: Icon(
                        imageData.isDeletable ? Icons.delete : Icons.lock,
                        color: imageData.isDeletable ? Colors.red : Colors.grey,
                      ),
                      title: Text('Image ${imageData.id}'),
                      subtitle: Text('Deletable: ${imageData.isDeletable}'),
                      trailing: Text('Index: $index'),
                    ),
                  );
                // ignore: unnecessary_to_list_in_spreads
                }).toList(),
                SizedBox(height: 20),
                Container(
                  padding: EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.blue.shade50,
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.blue.shade200),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Testing Notes:',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          color: Colors.blue.shade800,
                        ),
                      ),
                      SizedBox(height: 8),
                      Text(
                        '• Images with red delete icons are deletable\n'
                        '• Images with grey lock icons are NOT deletable\n'
                        '• Delete icons only appear on deletable images\n'
                        '• Try clicking delete icons to see the callback in action',
                        style: TextStyle(color: Colors.blue.shade700),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  },
);