ChatView Flutter Package

Configure how replies are displayed and how the app fetches older messages when a user taps a reply.

• RepliedMessageConfiguration: Allows customizing the backgroundColor, verticalBarColor, and repliedMsgAutoScrollConfig (to highlight the original message when scrolling to it).
• Loading Old Messages: The loadOldReplyMessage callback is triggered when a user taps a reply to a message that is not currently in the loaded list.

Best Practice: When fetching historical messages, aim to load a range that places the target messageId in the middle of the new list (e.g., if target is 25 and page size is 20, fetch IDs 15 to 35). Use chatController.replaceMessageList(historicalMessages) to update the view.

repliedMessageConfig: RepliedMessageConfiguration(
  loadOldReplyMessage: (messageId) async {
    try {
      final historicalMessages = await _apiService.getMessagesAroundId(
        messageId: messageId,
        limit: 20,
      );
      _chatController.replaceMessageList(historicalMessages);
    } catch (error) {
      debugPrint('Failed to load old reply message: $error');
    }
  },
  backgroundColor: Colors.blue,
  verticalBarColor: Colors.black,
  repliedMsgAutoScrollConfig: RepliedMsgAutoScrollConfig(
    enableHighlightRepliedMsg: true,
    highlightColor: Colors.grey,
    highlightScale: 1.1,
  ),
),

Follow these steps to implement a basic chat interface:

1. Create a ChatController: This manages the message list, scroll controller, current user, and other users.
2. Define your Message list: Create a List<Message> containing your initial data.
3. Add the ChatView widget: Pass the chatController, an onSendTap callback, and the current chatViewState (e.g., ChatViewState.hasMessages).
4. Implement onSendTap: Handle new messages by creating a Message object and calling chatController.addMessage(newMessage).

// 1. Create Controller
final chatController = ChatController(
  initialMessageList: messageList,
  scrollController: ScrollController(),
  currentUser: ChatUser(id: '1', name: 'Flutter'),
  otherUsers: [ChatUser(id: '2', name: 'Simform')],
);

// 2. Define Messages
List<Message> messageList = [
  Message(id: '1', message: "Hi", createdAt: DateTime.now(), sentBy: '1'),
];

// 3. Use Widget
ChatView(
  chatController: chatController,
  onSendTap: (message, replyMessage, messageType) {
    final newMessage = Message(
      id: '3',
      message: message,
      createdAt: DateTime.now(),
      sentBy: chatController.currentUser.id,
      replyMessage: replyMessage,
      messageType: messageType,
    );
    chatController.addMessage(newMessage);
  },
  chatViewState: ChatViewState.hasMessages,
)

To allow users to attach images to their text messages, enable the shouldSendImageWithText flag within the SendMessageConfiguration object passed to sendMessageConfig.

You can also customize the UI of the image preview before sending by providing a custom widget to the selectedImageViewBuilder field. This builder provides the list of selected images and an onImageRemove callback to handle image deletion.

sendMessageConfig: SendMessageConfiguration(
  shouldSendImageWithText: true, // Enable sending images with text
  selectedImageViewBuilder: (images, onImageRemove) {
    if (images.isNotEmpty) {
      return SizedBox(
        width: MediaQuery.sizeOf(context).width,
        child: Stack(
          children: [
            Image.file(
              File(images.first),
              height: 100,
            ),
            Positioned(
              right: 0,
              top: 0,
              child: IconButton(
                icon: const Icon(Icons.close),
                onPressed: () {
                  onImageRemove.call(imagePath: images.first);
                },
              ),
            ),
          ],
        ),
      );
    } else {
      return const SizedBox.shrink();
    }
  },
),

In version 3.0.0, VoiceRecordingConfiguration was updated to use RecorderSettings. This new structure encapsulates platform-specific settings for both iOS and Android. The androidOutputFormat property has been removed; the output format is now determined by the encoder used.

Key changes:

• Use recorderSettings instead of top-level properties.
• Use androidEncoderSettings for Android-specific configurations.
• Use iosEncoderSettings for iOS-specific configurations.

// New Usage in 3.0.0+
ChatView(
  sendMessageConfig: SendMessageConfiguration(
    voiceRecordingConfiguration: VoiceRecordingConfiguration(
        recorderSettings: RecorderSettings(
          bitRate: 128000,
          sampleRate: 44100,
          androidEncoderSettings: AndroidEncoderSettings(
            androidEncoder: AndroidEncoder.aacLc,
          ),
          iosEncoderSettings: IosEncoderSetting(
            iosEncoder: IosEncoder.kAudioFormatMPEG4AAC,
          ),
        ),
    ),
  ),
),

To integrate ChatList into your application, follow these three steps:

1. Create a ChatListController

Initialize the controller with your initial data and a ScrollController.

2. Define your Chat List

Create a list of ChatListItem objects containing user info, unread counts, and last messages.

3. Add the ChatList Widget

Pass the controller and configuration to the ChatList widget. You can use menuConfig to handle actions like deleting, muting, or pinning chats via callbacks.

// 1. Create Controller
ChatListController chatListController = ChatListController(
  initialChatList: chatList,
  scrollController: ScrollController(),
);

// 2. Define Data
List<ChatListItem> chatList = [
  ChatListItem(
    id: '2',
    name: 'Simform',
    unreadCount: 2,
    lastMessage: Message(
      id: '12',
      sentBy: '2',
      message: "🤩🤩",
      createdAt: DateTime.now(),
      status: MessageStatus.delivered,
    ),
    settings: ChatSettings(
      pinTime: DateTime.now(),
      pinStatus: PinStatus.pinned,
    ),
  ),
];

// 3. Add Widget
ChatList(
  controller: chatListController,
  appbar: const ChatListAppBar(title: 'ChatList Demo'),
  menuConfig: ChatMenuConfig(
    deleteCallback: (chat) => chatListController.removeChat(chat.id),
    muteStatusCallback: (result) => chatListController.updateChat(
      result.chat.id,
      (previousChat) => previousChat.copyWith(
        settings: previousChat.settings.copyWith(
          muteStatus: result.status,
        ),
      ),
    ),
    pinStatusCallback: (result) => chatListController.updateChat(
      result.chat.id,
      (previousChat) => previousChat.copyWith(
        settings: previousChat.settings.copyWith(
          pinStatus: result.status,
        ),
      ),
    ),
  ),
  tileConfig: ListTileConfig(onTap: (chat) {}),
)