Кэш base64 строки изображений во флаттере - PullRequest
1 голос
/ 22 апреля 2020

Я создаю приложение чата с флаттером и использую строку 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),
            );
          },
        ),
      ),
    );
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...