fix: use shimmer in images

This commit is contained in:
Salvatore Giordano
2021-03-08 15:45:51 +01:00
parent 5080203c1b
commit 5e4c106ff5
6 changed files with 80 additions and 45 deletions
@@ -1,5 +1,6 @@
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart'; import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart'; import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
import 'package:stream_chat_flutter/src/utils.dart'; import 'package:stream_chat_flutter/src/utils.dart';
@@ -104,10 +105,15 @@ class FileAttachment extends AttachmentWidget {
return getFileTypeImage(attachment.extraData['other']); return getFileTypeImage(attachment.extraData['other']);
}, },
placeholder: (_, __) { placeholder: (_, __) {
return Image.asset( return Shimmer.fromColors(
'images/placeholder.png', baseColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
fit: BoxFit.cover, highlightColor:
package: 'stream_chat_flutter', StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: Image.asset(
'images/placeholder.png',
fit: BoxFit.cover,
package: 'stream_chat_flutter',
),
); );
}, },
), ),
@@ -2,6 +2,7 @@ import 'dart:typed_data';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart'; import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
import 'package:transparent_image/transparent_image.dart'; import 'package:transparent_image/transparent_image.dart';
@@ -348,10 +349,16 @@ class GiphyAttachment extends AttachmentWidget {
height: size?.height, height: size?.height,
width: size?.width, width: size?.width,
placeholder: (_, __) { placeholder: (_, __) {
return Image.asset( return Shimmer.fromColors(
'images/placeholder.png', baseColor:
fit: BoxFit.cover, StreamChatTheme.of(context).colorTheme.greyGainsboro,
package: 'stream_chat_flutter', highlightColor:
StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: Image.asset(
'images/placeholder.png',
fit: BoxFit.cover,
package: 'stream_chat_flutter',
),
); );
}, },
imageUrl: imageUrl, imageUrl: imageUrl,
@@ -1,8 +1,8 @@
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:stream_chat_flutter/src/attachment/attachment_upload_state_builder.dart'; import 'package:stream_chat_flutter/src/attachment/attachment_upload_state_builder.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart'; import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
import 'package:transparent_image/transparent_image.dart';
import 'attachment_title.dart'; import 'attachment_title.dart';
import '../full_screen_media.dart'; import '../full_screen_media.dart';
@@ -84,10 +84,15 @@ class ImageAttachment extends AttachmentWidget {
height: size?.height, height: size?.height,
width: size?.width, width: size?.width,
placeholder: (_, __) { placeholder: (_, __) {
return Image.asset( return Shimmer.fromColors(
'images/placeholder.png', baseColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
fit: BoxFit.cover, highlightColor:
package: 'stream_chat_flutter', StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: Image.asset(
'images/placeholder.png',
fit: BoxFit.cover,
package: 'stream_chat_flutter',
),
); );
}, },
imageUrl: imageUrl, imageUrl: imageUrl,
@@ -11,6 +11,7 @@ import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:image_picker/image_picker.dart'; import 'package:image_picker/image_picker.dart';
import 'package:photo_manager/photo_manager.dart'; import 'package:photo_manager/photo_manager.dart';
import 'package:shimmer/shimmer.dart';
import 'package:stream_chat_flutter/src/video_service.dart'; import 'package:stream_chat_flutter/src/video_service.dart';
import 'package:stream_chat_flutter/src/media_list_view.dart'; import 'package:stream_chat_flutter/src/media_list_view.dart';
import 'package:stream_chat_flutter/src/message_list_view.dart'; import 'package:stream_chat_flutter/src/message_list_view.dart';
@@ -1642,11 +1643,15 @@ class MessageInputState extends State<MessageInput> {
return getFileTypeImage(attachment.extraData['other']); return getFileTypeImage(attachment.extraData['other']);
}, },
progressIndicatorBuilder: (context, _, progress) { progressIndicatorBuilder: (context, _, progress) {
return Center( return Shimmer.fromColors(
child: Container( baseColor:
width: 20.0, StreamChatTheme.of(context).colorTheme.greyGainsboro,
height: 20.0, highlightColor:
child: const CircularProgressIndicator(), StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: Image.asset(
'images/placeholder.png',
fit: BoxFit.cover,
package: 'stream_chat_flutter',
), ),
); );
}, },
@@ -216,9 +216,11 @@ class MessageWidget extends StatefulWidget {
), ),
onShowMessage: onShowMessage, onShowMessage: onShowMessage,
onReturnAction: onReturnAction, onReturnAction: onReturnAction,
onAttachmentTap: () { onAttachmentTap: onAttachmentTap != null
onAttachmentTap(message, attachment); ? () {
}, onAttachmentTap?.call(message, attachment);
}
: null,
); );
}, },
'video': (context, message, attachment) { 'video': (context, message, attachment) {
@@ -232,31 +234,35 @@ class MessageWidget extends StatefulWidget {
message: message, message: message,
onShowMessage: onShowMessage, onShowMessage: onShowMessage,
onReturnAction: onReturnAction, onReturnAction: onReturnAction,
onAttachmentTap: () { onAttachmentTap: onAttachmentTap != null
onAttachmentTap(message, attachment); ? () {
}, onAttachmentTap?.call(message, attachment);
}
: null,
); );
}, },
'giphy': (context, message, attachment) { 'giphy': (context, message, attachment) {
return GiphyAttachment( return GiphyAttachment(
attachment: attachment, attachment: attachment,
messageTheme: messageTheme, messageTheme: messageTheme,
message: message, message: message,
size: Size( size: Size(
MediaQuery.of(context).size.width * 0.8, MediaQuery.of(context).size.width * 0.8,
MediaQuery.of(context).size.height * 0.3, MediaQuery.of(context).size.height * 0.3,
), ),
onShowMessage: onShowMessage, onShowMessage: onShowMessage,
onReturnAction: onReturnAction); onReturnAction: onReturnAction,
);
}, },
'file': (context, message, attachment) { 'file': (context, message, attachment) {
return FileAttachment( return FileAttachment(
message: message, message: message,
attachment: attachment, attachment: attachment,
size: Size( size: Size(
MediaQuery.of(context).size.width * 0.8, MediaQuery.of(context).size.width * 0.8,
MediaQuery.of(context).size.height * 0.3, MediaQuery.of(context).size.height * 0.3,
)); ),
);
}, },
}..addAll(customAttachmentBuilders ?? {}), }..addAll(customAttachmentBuilders ?? {}),
super(key: key); super(key: key);
@@ -1,6 +1,8 @@
import 'dart:typed_data'; import 'dart:typed_data';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:video_thumbnail/video_thumbnail.dart'; import 'package:video_thumbnail/video_thumbnail.dart';
import 'stream_svg_icon.dart'; import 'stream_svg_icon.dart';
@@ -69,12 +71,16 @@ class _VideoThumbnailImageState extends State<VideoThumbnailImage> {
} }
if (!snapshot.hasData) { if (!snapshot.hasData) {
return widget.placeholderBuilder?.call(context) ?? return widget.placeholderBuilder?.call(context) ??
Image.asset( Shimmer.fromColors(
'images/placeholder.png', baseColor:
package: 'stream_chat_flutter', StreamChatTheme.of(context).colorTheme.greyGainsboro,
fit: widget.fit, highlightColor:
height: widget.height, StreamChatTheme.of(context).colorTheme.whiteSmoke,
width: widget.width, child: Image.asset(
'images/placeholder.png',
fit: BoxFit.cover,
package: 'stream_chat_flutter',
),
); );
} }
return Image.memory( return Image.memory(