Extended Image: A Comprehensive Flutter Library for Image Manipulation and Display

Published on by Flutter News Hub

Extended Image: A Comprehensive Flutter Library for Image Manipulation and Display

Extended Image is a powerful Flutter library that enhances the functionality of the standard Image widget. It provides a wide range of features, including image caching, zooming, panning, editing, and more. This article explores the key features and usage of Extended Image.

Image Caching and Loading

Extended Image offers robust image caching capabilities to optimize image loading and improve performance. By setting the cache parameter to true, Extended Image caches the image locally and loads it from the cache when the image is requested again. This reduces network traffic and improves the user experience, especially for images that are frequently accessed.

Here's a code example that demonstrates image caching:

ExtendedImage.network(
  url,
  width: 200,
  height: 200,
  cache: true,
)

Load State Management

Extended Image provides a comprehensive load state management system that allows you to handle different image loading scenarios. The loadStateChanged callback enables developers to define custom widgets for loading, completed, and failed states. This flexibility gives developers complete control over the user interface during the image loading process.

The following code snippet showcases load state management:

ExtendedImage.network(
  url,
  width: 200,
  height: 200,
  cache: true,
  loadStateChanged: (ExtendedImageState state) {
    switch (state.extendedImageLoadState) {
      case LoadState.loading:
        return Image.asset('assets/loading.gif');
      case LoadState.completed:
        return ExtendedRawImage(
          image: state.extendedImageInfo?.image,
          width: 200,
          height: 200,
        );
      case LoadState.failed:
        return GestureDetector(
          child: Stack(
            fit: StackFit.expand,
            children: [
              Image.asset('assets/failed.jpg'),
              Positioned(
                bottom: 0.0,
                left: 0.0,
                right: 0.0,
                child: Text(
                  'load image failed, click to reload',
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
          onTap: () {
            state.reLoadImage();
          },
        );
    }
  },
)

Image Zoom and Pan

Extended Image supports image zooming and panning functionality through the mode parameter. Setting mode to ExtendedImageMode.gesture enables gesture-based zooming and panning. The GestureConfig class provides fine-grained control over zoom/pan behavior, including minimum and maximum scale, speed, and inertia.

Here's an example of how to enable image zoom and pan:

ExtendedImage.network(
  url,
  width: 200,
  height: 200,
  mode: ExtendedImageMode.gesture,
  initGestureConfigHandler: (state) {
    return GestureConfig(
      minScale: 0.8,
      maxScale: 3.0,
      speed: 1.0,
      inertialSpeed: 100.0,
    );
  },
)

Image Editing

Extended Image provides a built-in image editor that allows users to crop, rotate, and flip images. The mode parameter can be set to ExtendedImageMode.editor to enable the editor. The EditorConfig class provides customization options for the editor, such as aspect ratio, corner shape, and line color.

Here's an example of how to use the image editor:

ExtendedImage.network(
  url,
  width: 200,
  height: 200,
  mode: ExtendedImageMode.editor,
  extendedImageEditorKey: editorKey,
  initEditorConfigHandler: (state) {
    return EditorConfig(
      maxScale: 5.0,
      cropRectPadding: EdgeInsets.all(20.0),
      cornerSize: Size(30.0, 5.0),
      cornerColor: Colors.red,
    );
  },
)

Photo View

Extended Image supports a photo view feature that allows users to view images in a full-screen, zoomable, and pannable interface. To enable the photo view, set the enableSlideOutPage parameter to true. Extended Image provides a slideAxis parameter to specify the axis of the slide (horizontal, vertical, or both), as well as a slideType parameter to define whether the slide operation affects only the image or the entire page.

Here's an example of how to use the photo view:

ExtendedImageSlidePage(
  child: ExtendedImage.network(
    url,
    enableSlideOutPage: true,
    slideAxis: SlideAxis.both,
    slideType: SlideType.onlyImage,
  ),
)

Other Features

In addition to the core features mentioned above, Extended Image offers a range of other capabilities, including:

  • Border and Shape Customization: Developers can customize the shape and border of the image using the border and shape parameters.
  • Clear and Save: The library provides methods for clearing the disk cache and saving network images to the device.
  • Custom Painting: Extended Image allows developers to add custom paint operations before and after the image is drawn.
  • Notch Support: Extended Image includes support for device notches and home indicators to ensure the image is positioned outside of these obstructing elements.

Conclusion

Extended Image is a comprehensive and feature-rich Flutter library that empowers developers to enhance the image handling capabilities of their applications. By leveraging its robust caching, zooming, panning, editing, and photo view features, developers can create visually engaging and intuitive user experiences.

Flutter News Hub