Add support for placeholder image/widget

[jkmathew]

Its better to have a placeholder while loading image or failed to load...
Placeholder can be an image itself or any widget.

[zmtzawqlp]

@jkmathew

please take a look at https://github.com/fluttercandies/extended_image/blob/master/example/lib/custom_image_demo.dart

show how to build placeholder /failed

[jkmathew]

Looks good, But I would prefer a passing a widget for loading/failed state.

[ManojMM026]

Yes, Please provide the same. I cannot have place holder image for zoomable Extended image.

[zmtzawqlp]

@ManojMM026 you can return container for loading state

[zmtzawqlp]

@ManojMM026 or set enableLoadState=false

[ManojMM026]

@zmtzawqlp I am not able to open a new issue in this repo but this what I want next and it's critical.

I would like to download an image with a specified size, In my case, I have very big images around 2450X1440 resolution. For Grid and list, I don't need a full size, I would like to load thumbnail of it lets say around 200X200. Please let me know how can I achieve it here.

I tried doing scale, Nothing happened

[zmtzawqlp]

@ManojMM026 do you want crop image, i think you can have a look https://github.com/fluttercandies/extended_image/blob/master/example/lib/common/crop_image.dart

[ManojMM026]

@zmtzawqlp I tried with this approach as well, App stayed ok for little longer than it used to be. But it's crashing again. so I don't think cropping helped me here. Do you have any other solution in mind? to reproduce this take grid of 50-100 images and scroll it fast. On ios it gives me:
Message from debugger: Terminated due to a memory issue. Because of this, I am scared to develop the live app in a flutter with huge images.

[zmtzawqlp]

@ManojMM026 1.compress image by yourself 2.provide smaller image . you can try to disable memory cache by settting enableMemoryCache false

[ManojMM026]

@zmtzawqlp 1.compress image by yourself: any code snippet for this? I will try enableMemoryCache Now.
I am from the android background and new to Flutter, I know in Glide lib(Android native) I can provide width and height of an image to be downloaded from the server no matter size of the original image,It gives me provided size image, I am not able to find the same in flutter, And my grid with around 30 images so gets crashed.

child: ExtendedImage.network(
            photoUrl,
            width: 200,
            height: 200,
            fit: BoxFit.cover,
            cache: true,
            enableMemoryCache: false,
            clearMemoryCacheIfFailed: true,
            loadStateChanged: (ExtendedImageState state) {
              switch (state.extendedImageLoadState) {
                case LoadState.loading:
                  {
                    return Icon(Icons.photo, color: Colors.teal.shade100,);
                  }
                case LoadState.completed:
                  {
                    print("Image width ${state.extendedImageInfo?.image.width} height : ${state.extendedImageInfo?.image.height}");
                    var widget=ExtendedRawImage(
                      image: state.extendedImageInfo?.image,
                      width: 200,
                      height: 200,
                      fit: BoxFit.cover,
                      soucreRect: Rect.fromLTWH((state.extendedImageInfo?.image?.width-200)/2,(state.extendedImageInfo?.image?.height-200)/2, 200, 200),
                    );
                    print("Source Rect width ${widget.width} height : ${widget.height}");
                    return widget;
                  }
                case LoadState.failed:
                  {
                    return Icon(Icons.photo, color: Colors.teal.shade100,);
                  }
              }
            }
          //cancelToken: cancellationToken,
        ),

Check my log for sample image :

I/flutter: Image width 1440 height : 2960
I/flutter: Source Rect width 200.0 height : 200.0

Source rect is my cropped image part. But I think the original image is being used and cached.

[ManojMM026]

can we plug this in library?

Image decoder

[zmtzawqlp]

this is what i said, compress image by yourself, you can resize the image data

[ManojMM026]

@zmtzawqlp back to the place holder again. while zooming if I try to set loading state, zoom gesture won't work.

 child: ExtendedImage.network(
              widget.photo.photoUrl,
              width: Appconstants.deviceWidth,
              height: Appconstants.deviceHeight,
              enableLoadState: true,
              loadStateChanged: (ExtendedImageState state){
                switch (state.extendedImageLoadState) {
                  case LoadState.loading:
                    return Icon(Icons.photo, color: Colors.teal.shade100,);

                    break;
                  case LoadState.completed:
                    var widget=ExtendedRawImage(
                      image: state.extendedImageInfo?.image,
                      fit: BoxFit.cover,
                    );
                    return widget;
                    break;
                  case LoadState.failed:
                    return Icon(Icons.photo, color: Colors.teal.shade100,);

                    break;
                }
              },
              clearMemoryCacheIfFailed: true,
              alignment: Alignment.center,
              mode: ExtendedImageMode.Gesture,
              initGestureConfigHandler: (state) {
                return GestureConfig(
                    minScale: 1.0,
                    animationMinScale: 0.7,
                    maxScale: 5.0,
                    animationMaxScale: 5.5,
                    speed: 1.0,
                    inertialSpeed: 100.0,
                    initialScale: 1.1,
                    inPageView: false);
              },
            ),

[zmtzawqlp]

report an new issue, version