From 3ca30728fcadda8a7c51be2b635fc2dd44bb09dd Mon Sep 17 00:00:00 2001 From: Navroop Singh Date: Thu, 11 May 2023 20:55:17 +0530 Subject: [PATCH 1/3] Added image background color --- lib/src/blurhash_widget.dart | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/src/blurhash_widget.dart b/lib/src/blurhash_widget.dart index e218ae0..60928e1 100644 --- a/lib/src/blurhash_widget.dart +++ b/lib/src/blurhash_widget.dart @@ -16,6 +16,7 @@ class BlurHash extends StatefulWidget { this.decodingWidth = _DEFAULT_SIZE, this.decodingHeight = _DEFAULT_SIZE, this.image, + this.imgBgColor, this.onDecoded, this.onDisplayed, this.onReady, @@ -46,6 +47,9 @@ class BlurHash extends StatefulWidget { /// Displayed background color before decoding final Color color; + /// Image background color displayed after the network image is loaded + final Color? imgBgColor; + /// How to fit decoded & downloaded image final BoxFit imageFit; @@ -137,7 +141,9 @@ class BlurHashState extends State { loaded = true; widget.onReady?.call(); return _DisplayImage( - child: img, + child: (widget.imgBgColor != null) + ? Container(color: widget.imgBgColor, child: img) + : img, duration: widget.duration, curve: widget.curve, onCompleted: () => widget.onDisplayed?.call(), From 80538a1ac80f7587662737c3dc06484d1ed2c3ea Mon Sep 17 00:00:00 2001 From: Navroop Singh Date: Thu, 11 May 2023 23:27:50 +0530 Subject: [PATCH 2/3] Corrected image loaded callback --- lib/src/blurhash_widget.dart | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/lib/src/blurhash_widget.dart b/lib/src/blurhash_widget.dart index 60928e1..9c5f62f 100644 --- a/lib/src/blurhash_widget.dart +++ b/lib/src/blurhash_widget.dart @@ -80,6 +80,7 @@ class BlurHashState extends State { late Future _image; late bool loaded; late bool loading; + late Image _networkImage; @override void initState() { @@ -88,6 +89,15 @@ class BlurHashState extends State { } void _init() { + if (widget.image != null) { + _networkImage = prepareDisplayedImage(widget.image!); + } + _networkImage.image + .resolve(ImageConfiguration()) + .addListener(ImageStreamListener((ImageInfo info, bool syncCall) { + loaded = true; + })); + _decodeImage(); loaded = false; loading = false; @@ -120,11 +130,11 @@ class BlurHashState extends State { alignment: Alignment.center, children: [ buildBlurHashBackground(), - if (widget.image != null) prepareDisplayedImage(widget.image!), + if (widget.image != null) _networkImage, ], ); - Widget prepareDisplayedImage(String image) => Image.network( + Image prepareDisplayedImage(String image) => Image.network( image, fit: widget.imageFit, headers: widget.httpHeaders, @@ -135,8 +145,7 @@ class BlurHashState extends State { loading = true; widget.onStarted?.call(); } - - if (loadingProgress == null) { + if (loaded) { // Image is now loaded, trigger the event loaded = true; widget.onReady?.call(); From 82c9f97110e768bd1bcae84eedf88f4e65da8413 Mon Sep 17 00:00:00 2001 From: Navroop Singh Date: Fri, 12 May 2023 01:46:41 +0530 Subject: [PATCH 3/3] Corrected the order of statements --- lib/src/blurhash_widget.dart | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/lib/src/blurhash_widget.dart b/lib/src/blurhash_widget.dart index 9c5f62f..dc2654a 100644 --- a/lib/src/blurhash_widget.dart +++ b/lib/src/blurhash_widget.dart @@ -89,6 +89,9 @@ class BlurHashState extends State { } void _init() { + loaded = false; + loading = false; + if (widget.image != null) { _networkImage = prepareDisplayedImage(widget.image!); } @@ -97,10 +100,8 @@ class BlurHashState extends State { .addListener(ImageStreamListener((ImageInfo info, bool syncCall) { loaded = true; })); - + _decodeImage(); - loaded = false; - loading = false; } @override @@ -166,8 +167,9 @@ class BlurHashState extends State { /// Decode the blurhash then display the resulting Image Widget buildBlurHashBackground() => FutureBuilder( future: _image, - builder: (ctx, snap) => - snap.hasData ? Image(image: UiImage(snap.data!), fit: widget.imageFit) : Container(color: widget.color), + builder: (ctx, snap) => snap.hasData + ? Image(image: UiImage(snap.data!), fit: widget.imageFit) + : Container(color: widget.color), ); } @@ -190,7 +192,8 @@ class _DisplayImage extends StatefulWidget { _DisplayImageState createState() => _DisplayImageState(); } -class _DisplayImageState extends State<_DisplayImage> with SingleTickerProviderStateMixin { +class _DisplayImageState extends State<_DisplayImage> + with SingleTickerProviderStateMixin { late Animation opacity; late AnimationController controller; @@ -227,10 +230,12 @@ class UiImage extends ImageProvider { const UiImage(this.image, {this.scale = 1.0}); @override - Future obtainKey(ImageConfiguration configuration) => SynchronousFuture(this); + Future obtainKey(ImageConfiguration configuration) => + SynchronousFuture(this); @override - ImageStreamCompleter load(UiImage key, DecoderCallback decode) => OneFrameImageStreamCompleter(_loadAsync(key)); + ImageStreamCompleter load(UiImage key, DecoderCallback decode) => + OneFrameImageStreamCompleter(_loadAsync(key)); Future _loadAsync(UiImage key) async { assert(key == this); @@ -248,5 +253,6 @@ class UiImage extends ImageProvider { int get hashCode => hashValues(image.hashCode, scale); @override - String toString() => '$runtimeType(${describeIdentity(image)}, scale: $scale)'; + String toString() => + '$runtimeType(${describeIdentity(image)}, scale: $scale)'; }