In this article, we will explore the capabilities of the ExtendedImage library, a powerful official extension library for images in Flutter. This guide will help you navigate through its features, import the library, and troubleshoot common issues.

Table of Contents

• Import
• Cache Network
  • Simple Use
  • Use ExtendedNetworkImageProvider
• Load State
• Zoom Pan
• Editor
• Troubleshooting

Import

To get started with the ExtendedImage library, you need to import it into your Flutter project. Add the following line in your pubspec.yaml file:

dependencies:
  extended_image: ^4.0.0

Cache Network

One of the standout features of ExtendedImage is its ability to cache network images. You can achieve this simply as follows:

Simple Use

With the ExtendedImage widget, your code might look like this:

ExtendedImage.network(
  url,
  width: 400,
  height: 400,
  fit: BoxFit.fill,
  cache: true,
  border: Border.all(color: Colors.red, width: 1.0),
  shape: BoxShape.rectangle,
  borderRadius: BorderRadius.all(Radius.circular(30.0)),
)

Use ExtendedNetworkImageProvider

For more control, you can use the ExtendedNetworkImageProvider:

ExtendedNetworkImageProvider(
  url,
  scale: 1.0,
  cache: false,
  retries: 3,
)

Load State

ExtendedImage supports different loading states (loading, completed, failed). You can implement this with:

loadStateChanged: (ExtendedImageState state) {
  switch (state.extendedImageLoadState) {
    case LoadState.loading:
      return CircularProgressIndicator();
    case LoadState.completed:
      return ExtendedRawImage(image: state.extendedImageInfo?.image);
    case LoadState.failed:
      return GestureDetector(
        child: Center(child: Text('Load failed, tap to retry')),
        onTap: () => state.reLoadImage(),
      );
  }
}

Zoom Pan

Extending user interactions, ExtendedImage allows zooming and panning images easily. Imagine a smartphone navigating maps! When you zoom in on your favorite café, you can drag the map around to explore the area. Similarly, with ExtendedImage, you can define gestures that allow users to zoom and pan images effortlessly.

ExtendedImage.network(
  imageUrl,
  fit: BoxFit.contain,
  mode: ExtendedImageMode.gesture,
  initGestureConfigHandler: (state) {
    return GestureConfig(
        minScale: 0.9,
        maxScale: 3.0
    );
  },
)

Editor

Whether you want to crop, rotate, or flip an image, ExtendedImage has got you covered. Using the editor mode, you can allow users to fetch the perfect image from their gallery.

ExtendedImage.network(
  imageUrl,
  mode: ExtendedImageMode.editor,
  initEditorConfigHandler: (state) {
    return EditorConfig(cropAspectRatio: 1.0);
  },
)

Troubleshooting

While using ExtendedImage, you may face a few challenges. Here are some common issues along with their solutions:

• Image Not Loading: Check your network connection and the image URL to ensure they are valid.
• App Crashing: If your app crashes while loading images, consider reducing the image size or memory usage.
• Cache Issues: If you are facing cache-related issues, try clearing the cache using clearDiskCachedImages method.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.