Я создаю приложение чата с флаттером и использую строку base64 для изображений, а также использую blo c. Моя проблема, когда список сообщений чата обновляется, изображения мерцают. и это очень раздражает, что изображения повторяются каждый раз. Поэтому я думаю, что с изображениями кеша это можно решить. Что я должен сделать для этого?
Виджет изображения:
class ImageBox extends StatelessWidget {
final String imgSrc;
final String defaultImg;
final BoxFit boxFit;
ImageBox({
@required this.imgSrc,
@required this.defaultImg,
this.boxFit = BoxFit.fill,
});
@override
Widget build(BuildContext context) {
return imgSrc == null || imgSrc.isEmpty
? Image.asset(
defaultImg,
fit: boxFit,
)
: Image.memory(
base64Decode(imgSrc),
fit: boxFit,
);
}
}
часть виджета для отображения изображения:
GestureDetector(
onTap: () async {
await showDialog(
context: context,
builder: (_) => ImageDialog(
img: chatMessage.message,
),
);
},
child: Container(
width: MediaQuery.of(context).size.width * 0.4,
child: ImageBox(
imgSrc: chatMessage.message,
defaultImg: Assets.avatar,
),
),
),
blo c состояние для хранения списка:
class DataLoaded extends ChatState {
final List<ChatMessage> chatMessages;
DataLoaded({this.chatMessages});
}
список обновлений в blo c:
Stream<ChatState> _mapAddToMessagesEventToState(ChatMessage chatMessage) async* {
List<ChatMessage> chatMessages = (state as DataLoaded).chatMessages;
chatMessages.insert(0, chatMessage);
print(chatMessages);
yield DataLoaded(chatMessages: chatMessages);
}
Модель ChatMessage:
class ChatMessage {
ChatMessageType chatMessageType;
String message;
DateTime dateTime;
int userId;
ChatMessage({
@required this.chatMessageType,
@required this.message,
@required this.dateTime,
@required this.userId,
});
}
и Мой ChatScreen:
class ChatScreen extends StatelessWidget {
final int chatId;
ChatScreen({@required this.chatId});
final ChatRepository chatRepository = ChatRepository();
Widget createBody(ChatState state, BuildContext context) {
if (state is Loading) {
return SkeletonListLoading();
} else if (state is DataLoaded) {
return Column(
children: <Widget>[
MessagesList(
messages: state.chatMessages,
),
SendBar(
onMessage: (message) => BlocProvider.of<ChatBloc>(context).add(
AddToMessages(
chatMessage: ChatMessage(
chatMessageType: ChatMessageType.TEXT,
dateTime: DateTime.now(),
message: message,
userId: store.state.userProfile.id,
),
),
),
onImage: (img) => BlocProvider.of<ChatBloc>(context).add(
AddToMessages(
chatMessage: ChatMessage(
chatMessageType: ChatMessageType.IMAGE,
dateTime: DateTime.now(),
message: img,
userId: store.state.userProfile.id,
),
),
),
),
],
);
} else {
return Container();
}
}
@override
Widget build(BuildContext context) {
return BlocProvider<ChatBloc>(
create: (context) {
return ChatBloc(chatRepository: chatRepository)..add(ChatScreenOpened(chatId: chatId));
},
child: BlocListener<ChatBloc, ChatState>(
listener: (context, state) async {},
child: BlocBuilder<ChatBloc, ChatState>(
builder: (context, state) {
return Scaffold(
body: createBody(state, context),
);
},
),
),
);
}
}