It doesn't caches images from network

[shakirkasmani]

It doesn't caches images from network, it redownloads images every time

[develogo]

Same question, it could look like FadeInImage, after loading, caching.

[develogo]

Try,

import 'package:transparent_image/transparent_image.dart';

Stack(
 children: [
  BlurHash(hash: 'hash'),
  FadeInImage.memoryNetwork(
   placeholder: kTransparentImage,
   image: imageUrl,
   fit: BoxFit.cover,
   width: double.maxFinite,
 ),
 ],
)

Since it doesn't support caching, you can use FadeInImage to cache the image and overlay the hash when done.

[haashem]

Try this:

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_blurhash/flutter_blurhash.dart';

class BlurHashNetworkImage extends StatelessWidget {
  final String imageUrl;
  final String blurHash;
  const BlurHashNetworkImage(
      {Key? key, required this.imageUrl, required this.blurHash})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(fit: StackFit.expand, children: [
      CachedNetworkImage(
        imageUrl: imageUrl,
        fit: BoxFit.cover,
        placeholder: (context, url) => BlurHash(
          color: Colors.transparent,
          hash: blurHash,
        ),
      )
    ]);
  }
}

[houdayec]

I think it is better to go for the latest solution of Baseflow, OctoImage. It includes blurhash directly in its API.

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

[girish54321]

Thanks @houdayec 😃, This works very nicely animation are more faster and no frame drop.

[Solido]

Octo is the right layer to manage network ops !