### Basic Asset Image Usage with DraggableImageWidget (Dart)

Source: https://context7.com/fakduai-logistics-and-digital-platform/draggable_image/llms.txt

Shows how to use the DraggableImageWidget to display a local asset image with drag and zoom capabilities. It highlights the `isNetworkImage: false` setting for asset paths and customizes scale limits. The example also notes the necessary `pubspec.yaml` configuration for assets.

```dart
import 'package:flutter/material.dart';
import 'package:draggable_image/draggable_image.dart';

class AssetImageExample extends StatelessWidget {
  const AssetImageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Asset Image')),
      body: Container(
        padding: const EdgeInsets.all(16.0),
        child: DraggableImageWidget(
          imagePath: 'assets/images/product.png',
          imageWidth: 300,
          imageHeight: 300,
          isNetworkImage: false,  // Important: set to false for assets
          minScale: 1.0,          // Prevent zooming out
          maxScale: 4.0,          // Allow 4x zoom in
        ),
      ),
    );
  }
}

// Note: Add to pubspec.yaml:
// flutter:
//   assets:
//     - assets/images/product.png

// Output: 300x300 image that can be pinched to zoom up to 4x,
// dragged with two fingers, and smoothly returns to center position.
// If image fails to load, displays red error icon on grey background.
```

--------------------------------

### Flutter DraggableImageWidget Error Handling Example

Source: https://context7.com/fakduai-logistics-and-digital-platform/draggable_image/llms.txt

This Dart code demonstrates how to use the DraggableImageWidget to display images, including handling errors for both network and asset paths. It shows the UI for invalid URLs, missing asset files, and a successful image load with a shimmer effect.

```dart
import 'package:flutter/material.dart';
import 'package:draggable_image/draggable_image.dart';

class ErrorHandlingExample extends StatelessWidget {
  const ErrorHandlingExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Error Handling')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          const Text(
            'Network Image Error (Invalid URL)',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          DraggableImageWidget(
            imagePath: 'https://invalid-url-that-does-not-exist.com/image.jpg',
            imageWidth: double.infinity,
            imageHeight: 200,
            isNetworkImage: true,
          ),

          const SizedBox(height: 24),

          const Text(
            'Asset Image Error (Missing File)',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          DraggableImageWidget(
            imagePath: 'assets/images/nonexistent.png',
            imageWidth: double.infinity,
            imageHeight: 200,
            isNetworkImage: false,
          ),

          const SizedBox(height: 24),

          const Text(
            'Valid Network Image for Comparison',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          DraggableImageWidget(
            imagePath: 'https://picsum.photos/600/200',
            imageWidth: double.infinity,
            imageHeight: 200,
            isNetworkImage: true,
          ),
        ],
      ),
    );
  }
}

// Output:
// Network error: Grey container (Colors.grey[300]) with grey error
// icon (Icons.error_outline, size 32) centered in 200px height area.
// No loading shimmer shown, error state appears immediately on timeout.
// 
// Asset error: Grey container (Colors.grey[300]) with red error icon
// (Icons.error_outline, size 50) centered in 200px height area.
// 
// Valid image: Shows shimmer placeholder (grey gradient animation)
// for ~1 second during loading, then displays image with full
// interactive capabilities (drag, zoom, snap-back animation).
// 
// Note: All error states are non-interactive (no gesture handling).
// Only successfully loaded images have drag and zoom functionality.

```

--------------------------------

### Display Network Image with Custom Animation (Dart)

Source: https://context7.com/fakduai-logistics-and-digital-platform/draggable_image/llms.txt

Demonstrates how to display a network image using DraggableImageWidget, with automatic caching and a customized snap-back animation duration. This example is suitable for product details or any scenario requiring interactive image viewing with specific animation behaviors.

```dart
import 'package:flutter/material.dart';
import 'package:draggable_image/draggable_image.dart';

class NetworkImageExample extends StatelessWidget {
  const NetworkImageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          const Padding(
            padding: EdgeInsets.all(16.0),
            child: Text(
              'Product Details',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
          ),
          DraggableImageWidget(
            imagePath: 'https://example.com/product-image.jpg',
            imageWidth: MediaQuery.of(context).size.width,
            imageHeight: 400,
            isNetworkImage: true,

            // Faster snap-back for quick interactions
            animationDuration: const Duration(milliseconds: 200),

            minScale: 0.8,
            maxScale: 2.5,
          ),
          const Padding(
            padding: EdgeInsets.all(16.0),
            child: Text('Pinch to zoom and inspect details'),
          ),
        ],
      ),
    );
  }
}

// Output: Network image that displays shimmer skeleton placeholder
// while loading (grey gradient animation), then becomes interactive.
// Image is automatically cached for offline access. Zoom gesture
// triggers overlay rendering for smooth 60fps performance. After
// release, animates back in 200ms with easeInOut curve.
```

--------------------------------

### Constrain Image Zoom with Dart

Source: https://context7.com/fakduai-logistics-and-digital-platform/draggable_image/llms.txt

This Dart code snippet shows how to use the DraggableImageWidget to set zoom constraints. It demonstrates two examples: one where the image cannot be zoomed out (minScale: 1.0) and can be zoomed in up to 2.0x, and another with a precise zoom range from 0.75x to 5.0x for detailed inspection. The widget handles clamping zoom levels to these defined bounds.

```dart
import 'package:flutter/material.dart';
import 'package:draggable_image/draggable_image.dart';

class ConstrainedZoomExample extends StatelessWidget {
  const ConstrainedZoomExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Zoom Constraints')),
      body: Column(
        children: [
          // Example 1: No zoom out, moderate zoom in
          Expanded(
            child: Container(
              padding: const EdgeInsets.all(16),
              child: Column(
                children: [
                  const Text('Cannot zoom out (minScale: 1.0)\n'),
                  const SizedBox(height: 8),
                  Expanded(
                    child: DraggableImageWidget(
                      imagePath: 'https://picsum.photos/id/100/600',
                      imageWidth: double.infinity,
                      imageHeight: double.infinity,
                      isNetworkImage: true,
                      minScale: 1.0,  // Cannot zoom smaller than original
                      maxScale: 2.0,  // Can zoom to 2x only
                    ),
                  ),
                ],
              ),
            ),
          ),

          const Divider(height: 1),

          // Example 2: Precise zoom range for technical inspection
          Expanded(
            child: Container(
              padding: const EdgeInsets.all(16),
              child: Column(
                children: [
                  const Text('Precise range (0.75x to 5.0x)\n'),
                  const SizedBox(height: 8),
                  Expanded(
                    child: DraggableImageWidget(
                      imagePath: 'https://picsum.photos/id/200/600',
                      imageWidth: double.infinity,
                      imageHeight: double.infinity,
                      isNetworkImage: true,
                      minScale: 0.75,  // Can zoom out to 75%
                      maxScale: 5.0,   // Can zoom in to 500% for detail inspection
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

```

--------------------------------

### Dart: Configure DraggableImageWidget Dimensions and Aspect Ratios

Source: https://context7.com/fakduai-logistics-and-digital-platform/draggable_image/llms.txt

This Dart code snippet for Flutter demonstrates how to use the DraggableImageWidget to display images with custom widths, heights, and aspect ratios. It shows examples for square, wide banner, portrait, and cinema (21:9) formats, utilizing network images and controlling scale limits. The widget preserves aspect ratio and allows for interactive drag and zoom.

```dart
import 'package:flutter/material.dart';
import 'package:draggable_image/draggable_image.dart';

class CustomDimensionsExample extends StatelessWidget {
  const CustomDimensionsExample({super.key});

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(title: const Text('Custom Dimensions')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Square thumbnail
            const Text('Square Thumbnail (200x200)\n'),
            const SizedBox(height: 8),
            DraggableImageWidget(
              imagePath: 'https://picsum.photos/200',
              imageWidth: 200,
              imageHeight: 200,
              isNetworkImage: true,
              maxScale: 2.0,
            ),

            const SizedBox(height: 24),

            // Wide banner
            const Text('Wide Banner (Full Width x 150)\n'),
            const SizedBox(height: 8),
            DraggableImageWidget(
              imagePath: 'https://picsum.photos/800/150',
              imageWidth: double.infinity,
              imageHeight: 150,
              isNetworkImage: true,
              maxScale: 2.5,
            ),

            const SizedBox(height: 24),

            // Portrait format
            const Text('Portrait Format (Half Width x 500)\n'),
            const SizedBox(height: 8),
            Center(
              child: DraggableImageWidget(
                imagePath: 'https://picsum.photos/300/500',
                imageWidth: screenWidth * 0.5,
                imageHeight: 500,
                isNetworkImage: true,
                minScale: 0.8,
                maxScale: 3.0,
              ),
            ),

            const SizedBox(height: 24),

            // Cinema aspect ratio (21:9)
            const Text('Cinema Aspect Ratio (~21:9)\n'),
            const SizedBox(height: 8),
            DraggableImageWidget(
              imagePath: 'https://picsum.photos/900/400',
              imageWidth: screenWidth - 32,
              imageHeight: (screenWidth - 32) * (9 / 21),
              isNetworkImage: true,
              maxScale: 2.0,
            ),
          ],
        ),
      ),
    );
  }
}

```

--------------------------------

### DraggableImageWidget Constructor and Network Image Usage (Dart)

Source: https://context7.com/fakduai-logistics-and-digital-platform/draggable_image/llms.txt

Demonstrates how to use the DraggableImageWidget constructor to display a network image with drag and pinch-to-zoom functionality. Key parameters include image path, dimensions, network image flag, animation duration, scale limits, and a debug mode.

```dart
import 'package:flutter/material.dart';
import 'package:draggable_image/draggable_image.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Product Gallery')),
        body: Center(
          child: DraggableImageWidget(
            // Required: path to image (local asset or URL)
            imagePath: 'https://picsum.photos/900',

            // Image dimensions in logical pixels
            imageWidth: double.infinity,
            imageHeight: 1000,

            // Set true for network images, false for assets
            isNetworkImage: true,

            // Duration for snap-back animation when released
            animationDuration: const Duration(milliseconds: 300),

            // Minimum zoom scale (0.5 = 50% of original size)
            minScale: 0.5,

            // Maximum zoom scale (3.0 = 300% of original size)
            maxScale: 3.0,

            // Show debug overlay with touch count and zoom level
            isDebug: true,
          ),
        ),
      ),
    );
  }
}

// Output: Full-screen interactive image that can be pinched to zoom
// between 50% and 300%, dragged with two fingers, and automatically
// animates back to original position when released. Debug overlay
// shows: touch count, current state, and zoom level.
```

--------------------------------

### Flutter PageView with Draggable Images

Source: https://context7.com/fakduai-logistics-and-digital-platform/draggable_image/llms.txt

Implements a full-screen photo viewer using Flutter's PageView and the draggable_image package. Supports image swiping, zooming, and panning with network image loading and caching. Dependencies include 'flutter/material.dart' and 'draggable_image/draggable_image.dart'.

```dart
import 'package:flutter/material.dart';
import 'package:draggable_image/draggable_image.dart';

class PageViewExample extends StatefulWidget {
  const PageViewExample({super.key});

  @override
  State<PageViewExample> createState() => _PageViewExampleState();
}

class _PageViewExampleState extends State<PageViewExample> {
  final PageController _pageController = PageController();
  int _currentPage = 0;

  final List<String> _images = const [
    'https://picsum.photos/id/1/800',
    'https://picsum.photos/id/2/800',
    'https://picsum.photos/id/3/800',
    'https://picsum.photos/id/4/800',
    'https://picsum.photos/id/5/800',
  ];

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text(
          'Photo ${_currentPage + 1} of ${_images.length}',
          style: const TextStyle(color: Colors.white),
        ),
        iconTheme: const IconThemeData(color: Colors.white),
      ),
      body: PageView.builder(
        controller: _pageController,
        itemCount: _images.length,
        onPageChanged: (index) {
          setState(() {
            _currentPage = index;
          });
        },
        itemBuilder: (context, index) {
          return Center(
            child: DraggableImageWidget(
              imagePath: _images[index],
              imageWidth: MediaQuery.of(context).size.width,
              imageHeight: MediaQuery.of(context).size.height * 0.8,
              isNetworkImage: true,
              minScale: 1.0,
              maxScale: 4.0,
              animationDuration: const Duration(milliseconds: 250),
            ),
          );
        },
      ),
      bottomNavigationBar: Container(
        color: Colors.black,
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: List.generate(
            _images.length,
            (index) => Container(
              margin: const EdgeInsets.symmetric(horizontal: 4),
              width: 8,
              height: 8,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: _currentPage == index
                    ? Colors.white
                    : Colors.white.withOpacity(0.3),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Create Scrollable Image Gallery with Draggable Images (Dart)

Source: https://context7.com/fakduai-logistics-and-digital-platform/draggable_image/llms.txt

Illustrates how to build a scrollable image gallery where each image is independently zoomable and draggable using DraggableImageWidget. This is ideal for displaying multiple images in a list format, such as a photo gallery, where each item needs individual interaction capabilities.

```dart
import 'package:flutter/material.dart';
import 'package:draggable_image/draggable_image.dart';

class ImageGalleryExample extends StatelessWidget {
  const ImageGalleryExample({super.key});

  final List<String> imageUrls = const [
    'https://picsum.photos/id/10/800',
    'https://picsum.photos/id/20/800',
    'https://picsum.photos/id/30/800',
    'https://picsum.photos/id/40/800',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Photo Gallery')),
      body: ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemCount: imageUrls.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.only(bottom: 24.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Photo ${index + 1}',
                  style: const TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(height: 8),
                DraggableImageWidget(
                  imagePath: imageUrls[index],
                  imageWidth: double.infinity,
                  imageHeight: 300,
                  isNetworkImage: true,
                  minScale: 1.0,
                  maxScale: 3.0,
                  animationDuration: const Duration(milliseconds: 250),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

// Output: Scrollable list of 4 images, each independently zoomable
// and draggable. Scroll gesture works normally with one finger.
// Two-finger pinch on any image creates an overlay layer for that
// specific image, enabling smooth zoom without affecting scroll.
// Each image has its own state and animations.
```

--------------------------------

### Flutter: Implement DraggableImageWidget

Source: https://github.com/fakduai-logistics-and-digital-platform/draggable_image/blob/main/README.md

This snippet demonstrates how to integrate the DraggableImageWidget into a Flutter application. It requires the 'draggable_image' package and shows how to configure an image from a network URL with interactive zoom and drag capabilities. Ensure the package is added to your pubspec.yaml.

```dart
import 'package:draggable_image/draggable_image.dart';

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: DraggableImageWidget(
            imageWidth: double.infinity,
            imageHeight: 1000,
            imagePath: 'https://picsum.photos/900',
            isNetworkImage: true,
            isDebug: true,
    ));
  }
}
```

--------------------------------

### Enable Debug Mode for Gesture Visualization (Dart)

Source: https://context7.com/fakduai-logistics-and-digital-platform/draggable_image/llms.txt

Shows how to enable debug mode in DraggableImageWidget to visualize gesture interactions, aiding in troubleshooting and understanding the component's behavior during development. This feature overlays touch count, state, and zoom level directly onto the image.

```dart
import 'package:flutter/material.dart';
import 'package:draggable_image/draggable_image.dart';

class DebugModeExample extends StatelessWidget {
  const DebugModeExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Debug Mode')),
      body: Center(
        child: Container(
          color: Colors.grey[100],
          child: DraggableImageWidget(
            imagePath: 'https://picsum.photos/500',
            imageWidth: 350,
            imageHeight: 350,
            isNetworkImage: true,
            isDebug: true,  // Enable debug overlay
            minScale: 0.5,
            maxScale: 4.0,
          ),
        ),
      ),
    );
  }
}

// Output: Interactive image with black semi-transparent debug overlay
// in top-left corner showing:
// - "จำนวนนิ้วที่สัมผัส: 2" (touch count)
// - "สถานะ: กำลังลาก/ซูม (overlay)" (state: dragging/zooming)
// - "ซูม: 1.50x" (current zoom scale)
//
// Debug info updates in real-time during interaction:
// - Touch count changes from 0 → 2 when pinching starts
// - State shows "ปกติ" (normal) or "กำลังลาก/ซูม (overlay)" when active
// - Zoom displays current scale factor (e.g., 0.50x to 4.00x)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.