Baseflow / octo_image

A multifunctional Flutter image widget
https://baseflow.com/
MIT License
156 stars 23 forks source link

Update examples (blurhash) #31

Open sischnei opened 10 months ago

sischnei commented 10 months ago

It seems blurhash has been removed - but the first example in the documentation still showcases how to use it:

OctoImage(
  image: CachedNetworkImageProvider(
      'https://blurha.sh/assets/images/img1.jpg'),
  placeholderBuilder: OctoPlaceholder.blurHash(
    'LEHV6nWB2yk8pyo0adR*.7kCMdnj',
  ),
  errorBuilder: OctoError.icon(color: Colors.red),
  fit: BoxFit.cover,
);

Yet there is no OctoPlacholder.blurHash(...) method anymore. Please update the examples!

maskeyp commented 10 months ago

same .blurHash is not defined

maskeyp commented 10 months ago

/// Simple set to show [OctoPlaceholder.circularProgressIndicator] as /// placeholder and [OctoError.icon] as error. OctoSet blurHash( String hash, { BoxFit? fit, Text? errorMessage, }) { return OctoSet( placeholderBuilder: blurHashPlaceholderBuilder(hash, fit: fit), errorBuilder: blurHashErrorBuilder(hash, fit: fit), ); }

OctoPlaceholderBuilder blurHashPlaceholderBuilder(String hash, {BoxFit? fit}) { return (context) => SizedBox.expand( child: Image( image: BlurHashImage(hash), fit: fit ?? BoxFit.cover, ), ); }

OctoErrorBuilder blurHashErrorBuilder( String hash, { BoxFit? fit, Text? message, IconData? icon, Color? iconColor, double? iconSize, }) { return OctoError.placeholderWithErrorIcon( blurHashPlaceholderBuilder(hash, fit: fit), message: message, icon: icon, iconColor: iconColor, iconSize: iconSize, ); }

is this the way?

mpastewski commented 9 months ago

I'm also using OctoImage with blurHash and it works great for ^1.0.2. It'd be great if you could document how to migrate to ^2.0.0 and overcome this.

Mezmeraid commented 9 months ago

For those interested, I fixed on my side by introducing this class :

class OctoBlurHashFix {
  static OctoPlaceholderBuilder placeHolder(String hash, {BoxFit? fit}) {
    return (context) => SizedBox.expand(
      child: Image(
        image: BlurHashImage(hash),
        fit: fit ?? BoxFit.cover,
      ),
    );
  }

  static OctoErrorBuilder error(
      String hash, {
        BoxFit? fit,
        Text? message,
        IconData? icon,
        Color? iconColor,
        double? iconSize,
      }) {
    return OctoError.placeholderWithErrorIcon(
      placeHolder(hash, fit: fit),
      message: message,
      icon: icon,
      iconColor: iconColor,
      iconSize: iconSize,
    );
  }
}

Then, replace your usages of OctoError.blurhash and OctoPlaceholder.blurhash :

OctoImage(
    colorBlendMode: BlendMode.modulate,
    fit: BoxFit.cover,
    image: CachedNetworkImageProvider(imageUrl),
    placeholderBuilder: OctoBlurHashFix.placeHolder(placeHolderBlurHashString),
    errorBuilder: OctoBlurHashFix.error(errorBlurHashString, iconColor: Colors.transparent),
 ),

You may also have to add the blurhash dependency flutter_blurhash: ^0.8.2