Skip to main content

​
Introduction

The CometChat v5 Flutter UI Kit streamlines the integration of in-app chat functionality into your applications. Packed with prebuilt, modular UI components, it supports essential messaging features for both one-to-one and group conversations. With built-in theming options, including light and dark modes, customizable fonts, colors, and extensive configuration possibilities, developers can create chat experiences tailored to their application’s needs.

​
Integration

In v4, integration was straightforward due to the availability of composite components like CometChatConversationsWithMessages. This single component provided end-to-end functionality, including listing conversations, handling conversation clicks, loading messages (message header, list, composer), displaying user or group details, and supporting threaded messages. Developers could achieve all these features with minimal setup. However, customization posed significant challenges. Customizing the UI or adding custom views required a deep understanding of the internal flow of the composite component. Additionally, configurations were a mix of custom view props, behavioural props, and style props, which often led to confusion. Styling deeply nested components also proved cumbersome, limiting the developer’s ability to make meaningful changes.
With v5, composite components have been replaced with smaller, modular components, such as Conversations, Message Header, Message List, and Message Composer. This modular approach makes integration more flexible and easier to understand. Each component has a well-defined purpose, allowing developers to use them in ways that suit their specific requirements. The need for complex configurations has been eliminated, as developers can now customize behavior and styling directly via props. Styling has been significantly simplified, with every component carefully assigned, enabling developers to customize styles globally or at the component level effortlessly. To support the transition from v4 to v5, CometChat has built a sample app that replicates the functionality of v4’s composite components. This sample app serves as a reference for developers looking to build additional features such as user/group details, call log details, threaded messages, and advanced messaging capabilities. By following this approach, developers can take full advantage of v5’s modular design while implementing complex functionality in an organized manner.
Learn how to build a complete messaging UI using the v5 UI Kit by following the step-by-step guide here.

​
Components

The v4 UI Kit provided composite components like CometChatConversationsWithMessages, which offered end-to-end functionality. These components integrated features such as conversation lists, message views (header, list, composer), user/group details, and threaded messages into a single unit. However, customization of deeply nested components through configuration was challenging and resulted in a suboptimal developer experience.
Components in v4 UI Kit:
CometChatConversationsWithMessagesCometChatUsersWithMessagesCometChatGroupsWithMessages
CometChatMessagesCometChatMessageHeaderCometChatMessageList
CometChatMessageComposerCometChatThreadedMessagesCometChatConversations
CometChatUsersCometChatGroupsCometChatContacts
CometChatDetailsCometChatGroupMembersCometChatAddMembers
CometChatBannedMembersCometChatTransferOwnershipCometChatMessageInformation
CometChatIncomingCallCometChatOngoingCallCometChatOutgoingCall
CometChatCallButtonsCometChatCallLogsCometChatCallLogDetails
CometChatCallLogHistoryCometChatCallLogRecordingsCometChatCallLogParticipants
CometChatCallLogsWithDetails
In v5, the composite approach is replaced with smaller, modular components like Conversations, Message Header, Message List, and Message Composer. Developers now need to stitch these components together to build the desired functionality. This change allows for greater flexibility and easier customization via props, significantly improving the developer experience while maintaining functionality.
Components in v5 UI Kit:
CometChatConversationsCometChatUsersCometChatGroups
CometChatGroupMembersCometChatMessageHeaderCometChatMessageList
CometChatMessageComposerCometChatThreadedHeaderCometChatIncomingCall
CometChatOutgoingCallCometChatCallButtonsCometChatCallLogs

​
Theming

In v4, theming was managed using the CometChatTheme class along with the Palette and Typography classes. The Palette class provided methods like backGroundColor, mode, accent, and similar setters for configuring colors and themes. While this approach worked, it required instantiating multiple objects and passing them through constructors, which added complexity to the theming process. Developers had to create palette and typography instances, configure them with various color and font settings, and then pass them to create a theme object. The reliance on Context for theming introduced several challenges. Customizing themes often required developers to consume the theme from the context and then explicitly update values programmatically, which added unnecessary complexity. For example, switching between light and dark modes required interacting with the theme’s context and invoking specific methods like mode. This process was less straightforward compared to the traditional approach to define themes dynamically. 
Palette palette = const Palette(
  mode: PaletteThemeModes.light,
  primary: PaletteModel(light: Color(0xFF6851D6), dark: Color(0xFF6851D6)),
);

Typography typography = Typography(
  heading: FontStyle(fontSize: 14, fontFamily: "Roboto"),
);

CometChatTheme cometChatTheme = CometChatTheme(
  palette: palette,
  typography: typography,
);
In v5, theming has been completely revamped for simplicity and directness. The complex theming classes and object instantiation have been replaced with direct static property assignment on CometChatColorPalette and CometChatTypography. This means every design token, such as colors and typography, can now be set directly as static properties. Changing the primary color, for instance, is as simple as assigning a value to CometChatColorPalette().primary — no need to interact with complex theming logic or instantiate multiple objects. The new theming approach is declarative and lightweight, significantly enhancing both performance and developer experience. By providing direct access to theme properties, developers can now customize the look and feel of their application with minimal code and maximum clarity.
main.dart
ThemeData(
  fontFamily: 'Times New Roman',
  extensions: [
    CometChatColorPalette(
      primary: Color(0xFFF76808),
      textPrimary: Color(0xFF141414),
      background1: Color(0xFFFFFFFF),
    ),
    CometChatMessageListStyle(
      outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
      incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
      ),
    ),
  ],
);
This architectural redesign makes theming more intuitive and aligns with modern Flutter development practices. Developers now have a more powerful and straightforward toolset to customize and manage themes effectively.
For detailed guidance on theming and customizing colors in the CometChat React UI Kit, refer to the following resources:

​
Properties

In v5, the approach to component properties has been significantly refined to improve clarity and ease of use. All style-related properties have been streamlined to work seamlessly with the new theming system based on direct property access. This change ensures a more efficient and flexible styling process without the need for verbose or redundant configuration within the component properties. Configuration properties, which were prominent in v4, have also been simplified. With v5’s modular design, components are no longer deeply nested, making complex configurations unnecessary. Developers now have direct control over each component through clearly defined properties, reducing complexity and increasing flexibility in how components are used and styled. Custom view properties have undergone a comprehensive overhaul to ensure consistency across all components. For example, components that are represented as list items now share a uniform set of customizable properties, enabling a standardized approach to customization. These properties include:
  • itemView - Custom view for the entire item
  • leadingView - Custom view for the leading section
  • trailingView - Custom view for the trailing section
  • subtitleView - Custom view for the subtitle
  • titleView - Custom view for the title
This consistent naming convention makes it easier for developers to understand and apply customizations across various components, streamlining the development process. For a comprehensive overview of newly added, renamed, and removed properties, refer to the Property Changes Documentation.
⌘I