Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added image background color for transparent background images #54

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 33 additions & 12 deletions lib/src/blurhash_widget.dart
Original file line number Diff line number Diff line change
@@ -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;

@@ -76,6 +80,7 @@ class BlurHashState extends State<BlurHash> {
late Future<ui.Image> _image;
late bool loaded;
late bool loading;
late Image _networkImage;

@override
void initState() {
@@ -84,9 +89,19 @@ class BlurHashState extends State<BlurHash> {
}

void _init() {
_decodeImage();
loaded = false;
loading = false;

if (widget.image != null) {
_networkImage = prepareDisplayedImage(widget.image!);
}
_networkImage.image
.resolve(ImageConfiguration())
.addListener(ImageStreamListener((ImageInfo info, bool syncCall) {
loaded = true;
}));

_decodeImage();
}

@override
@@ -116,11 +131,11 @@ class BlurHashState extends State<BlurHash> {
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,
@@ -131,13 +146,14 @@ class BlurHashState extends State<BlurHash> {
loading = true;
widget.onStarted?.call();
}

if (loadingProgress == null) {
if (loaded) {
// Image is now loaded, trigger the event
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(),
@@ -151,8 +167,9 @@ class BlurHashState extends State<BlurHash> {
/// Decode the blurhash then display the resulting Image
Widget buildBlurHashBackground() => FutureBuilder<ui.Image>(
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),
);
}

@@ -175,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<double> opacity;
late AnimationController controller;

@@ -212,10 +230,12 @@ class UiImage extends ImageProvider<UiImage> {
const UiImage(this.image, {this.scale = 1.0});

@override
Future<UiImage> obtainKey(ImageConfiguration configuration) => SynchronousFuture<UiImage>(this);
Future<UiImage> obtainKey(ImageConfiguration configuration) =>
SynchronousFuture<UiImage>(this);

@override
ImageStreamCompleter load(UiImage key, DecoderCallback decode) => OneFrameImageStreamCompleter(_loadAsync(key));
ImageStreamCompleter load(UiImage key, DecoderCallback decode) =>
OneFrameImageStreamCompleter(_loadAsync(key));

Future<ImageInfo> _loadAsync(UiImage key) async {
assert(key == this);
@@ -233,5 +253,6 @@ class UiImage extends ImageProvider<UiImage> {
int get hashCode => hashValues(image.hashCode, scale);

@override
String toString() => '$runtimeType(${describeIdentity(image)}, scale: $scale)';
String toString() =>
'$runtimeType(${describeIdentity(image)}, scale: $scale)';
}