> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-audit-content-webhooks.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# User Details

> User Details — CometChat documentation.

## Overview

`CometChatDetails` functions as a standalone widgets designed to establish a screen displaying the details of a specific user or group object. It inherits all properties and methods from the `CometChatListBase` class, ensuring comprehensive functionality and customization options.

`CometChatDetails` internally implements the following functionalities:

* User Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
* User Actions: The details screen provides actions to block/unblock the user.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/2xNny9K-x0AIgQXg/images/3d7e5bb6-user_details_overview_cometchat_screens-4c08540e36f7d5ca90394ba7367e79f6.png?fit=max&auto=format&n=2xNny9K-x0AIgQXg&q=85&s=1bf4ae5e5cc3a101f7d1f6718218897a" alt="Image" width="4498" height="3121" data-path="images/3d7e5bb6-user_details_overview_cometchat_screens-4c08540e36f7d5ca90394ba7367e79f6.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/kibZL8uJM6A1yelM/images/23fcd927-user_details_overview_cometchat_screens-e3dcee7d76c9a34130651f0517fb6c88.png?fit=max&auto=format&n=kibZL8uJM6A1yelM&q=85&s=40b3303763323cbb178fd752c1e4182d" alt="Image" width="4498" height="3121" data-path="images/23fcd927-user_details_overview_cometchat_screens-e3dcee7d76c9a34130651f0517fb6c88.png" />
  </Tab>
</Tabs>

## Usage

### Integration

As `CometChatDetails` functions as a **widget**, it can be directly launched through a button click or any user-initiated action. Additionally, it can be seamlessly integrated into a tab view controller. `CometChatDetails` offers a range of parameters and methods for customizing its user interface.

You can launch `CometChatUsersWithMessages` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.

##### 1. Using Navigator to Launch `CometChatUsersWithMessages`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatDetails(
        user: User(
            uid: "uid",
            name: "name",
        ),
    )));
    ```
  </Tab>
</Tabs>

##### 2. Embedding `CometChatUsersWithMessages` as a Widget in the build Method

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:flutter/material.dart';

    class UserDetails extends StatefulWidget {
      const UserDetails({super.key});

      @override
      State<UserDetails> createState() => _UserDetailsState();
    }

    class _UserDetailsState extends State<UserDetails> {

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: SafeArea(
                child: CometChatDetails(
                    user: User(
                        uid: "uid",
                        name: "name",
                    ) // Required User object with name and UID (rest parameters optional)
                )
            )
        );
      }
    }
    ```
  </Tab>
</Tabs>

### Actions

[Actions](/ui-kit/flutter/v4/components-overview#actions) dictate how a widgets functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widgets to fit your specific needs.

##### 1. onBack

The `onBack` event is typically triggered when the close button is clicked and it carries a default action. However, with the following code snippet, you can effortlessly override this default operation.

This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetails(
      user: User(
          uid: "uid",
          name: "name"
      ),
      onBack: () {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

##### 2. onError

This method `onError`, allows users to override error handling within `CometChatDetails`, providing greater control over error responses and actions.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetails(
      user: User(
          uid: "uid",
          name: "name"
      ),
      onError: (e) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

### Filters

**Filters** allow you to customize the data displayed in a list within a widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.

`CometChatDetails` widgets does not have available filters.

***

### Events

[Events](/ui-kit/flutter/v4/components-overview#events) are emitted by a widget. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

To handle events supported by Users you have to add corresponding listeners by using `CometChatUserEvents`

| Events          | Description                                                           |
| --------------- | --------------------------------------------------------------------- |
| ccUserBlocked   | This will get triggered when the logged in user blocks another user   |
| ccUserUnblocked | This will get triggered when the logged in user unblocks another user |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:flutter/material.dart';

    class YourScreen extends StatefulWidget {
      const YourScreen({super.key});

      @override
      State<YourScreen> createState() => _YourScreenState();
    }

    class _YourScreenState extends State<YourScreen> with CometChatUserEventListener {

      @override
      void initState() {
        super.initState();
        CometChatUserEvents.addUsersListener("listenerId", this);
      }

      @override
      void dispose(){
        super.dispose();
        CometChatUserEvents.removeUsersListener("listenerId");
      }

      @override
      void ccUserBlocked(User user) {
        // TODO("Not yet implemented")
      }

      @override
      void ccUserUnblocked(User user) {
        // TODO("Not yet implemented")
      }

      @override
      Widget build(BuildContext context) {
        return const Placeholder();
      }

    }
    ```
  </Tab>
</Tabs>

***

## Customization

To fit your app's design requirements, you can customize the appearance of the details widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

### Style

Using Style you can customize the look and feel of the widgets in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the widget.

##### 1. Details Style

You can set the `DetailsStyle` to the User Detail Widget to customize the styling.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetails(
        user: User(
            uid: "uid",
            name: "name"
        ),
        detailsStyle: DetailsStyle(
            background: Color(0xFFE4EBF5),
            closeIconTint: Colors.black,
            titleStyle: TextStyle(fontFamily: "")
        )
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/wKi_davWP7OPe0wz/images/9bbe0995-user_details_style_cometchat_screens-88937bf44f5211e97eb11acf478117b1.png?fit=max&auto=format&n=wKi_davWP7OPe0wz&q=85&s=50a9adf941fdbbe4c443f108bbc6d21e" alt="Image" width="4498" height="3121" data-path="images/9bbe0995-user_details_style_cometchat_screens-88937bf44f5211e97eb11acf478117b1.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/nrKmc8-pXdAch9Hn/images/6b980962-user_details_style_cometchat_screens-745e69fd50ecc78bbdd7290250f8ee4f.png?fit=max&auto=format&n=nrKmc8-pXdAch9Hn&q=85&s=6c22885b01bd43df9e81f94be5dd098e" alt="Image" width="4498" height="3121" data-path="images/6b980962-user_details_style_cometchat_screens-745e69fd50ecc78bbdd7290250f8ee4f.png" />
  </Tab>
</Tabs>

List of properties exposed by `DetailsStyle`

| Property                       | Data Type               | Description                                                                   |
| ------------------------------ | ----------------------- | ----------------------------------------------------------------------------- |
| `titleStyle`                   | `TextStyle?`            | Provides styling for the title text.                                          |
| `closeIconTint`                | `Color?`                | Provides color to the close button.                                           |
| `privateGroupIconBackground`   | `Color?`                | Provides background color for the status indicator if the group is private.   |
| `protectedGroupIconBackground` | `Color?`                | Provides background color for the status indicator if the group is protected. |
| `onlineStatusColor`            | `Color?`                | Sets the color for the online status indicator.                               |
| `width`                        | `double?`               | Width of the details widget.                                                  |
| `height`                       | `double?`               | Height of the details widget.                                                 |
| `background`                   | `Color?` or `Gradient?` | Background color or gradient of the details widget.                           |
| `gradient`                     | `Gradient?`             | Gradient background of the details widget.                                    |
| `border`                       | `Border?`               | Border of the details widget.                                                 |

***

##### 2. Avatar Style

To apply customized styles to the `Avatar` widget in the `CometChatDetails` widget, you can use the following code snippet. For further insights on **Avatar** Styles [refer](/ui-kit/flutter/v4/avatar)

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetails(
        user: User(
            uid: "uid",
            name: "name",
        ),
        avatarStyle: AvatarStyle(
            border: Border.all(width: 3),
            borderRadius: 20,
            background: Colors.yellow
        ),
    )
    ```
  </Tab>
</Tabs>

***

##### 3. StatusIndicator Style

To apply customized styles to the `StatusIndicator` widget in the `CometChatDetails` widget, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/flutter/v4/status-indicator)

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetails(
      user: User(
          uid: "uid",
          name: "name",
          status: "Online"
      ),
      statusIndicatorStyle: const StatusIndicatorStyle(
          borderRadius: 10,
          gradient: LinearGradient(colors: [Colors.red, Colors.orange], begin: Alignment.topLeft, end: Alignment.bottomRight)
      ),
    )
    ```
  </Tab>
</Tabs>

***

##### 4. ListItem Style

To apply customized styles to the List Item widget in the `CometChatDetails` widget, You can use the following code snippet. For further insights on List Item Styles [refer](/ui-kit/flutter/v4/list-item)

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetails(
      user: User(
          uid: "uid",
          name: "name",
          status: "Online"
      ),
      listItemStyle: ListItemStyle(
        titleStyle: TextStyle(color: Colors.red),
        separatorColor: Colors.red,
        border: Border.all(width: 2, color: Colors.red),
        padding: EdgeInsets.only(left: 10)
      ),
    )
    ```
  </Tab>
</Tabs>

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetails(
      user: User(
          uid: "uid",
          name: "name",
          status: "Online"
      ),
      hideProfile: true,
      showCloseButton: false,
      title: "Your Title",
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/W0TFCZ2NyXOY9_IP/images/a17086a8-user_details_functionality_cometchat_screens-441c48af0d05d90afb3c256b2c1f9c20.png?fit=max&auto=format&n=W0TFCZ2NyXOY9_IP&q=85&s=c190c18e85c2ca8a7214b6a2b0526b34" alt="Image" width="4498" height="3121" data-path="images/a17086a8-user_details_functionality_cometchat_screens-441c48af0d05d90afb3c256b2c1f9c20.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/txxqsAdX4Imi9Slw/images/6a291d59-user_details_functionality_cometchat_screens-5044e4774063eb07308566a765ebbd88.png?fit=max&auto=format&n=txxqsAdX4Imi9Slw&q=85&s=09898e54367cb9f2f8edbab36ce23daf" alt="Image" width="4498" height="3121" data-path="images/6a291d59-user_details_functionality_cometchat_screens-5044e4774063eb07308566a765ebbd88.png" />
  </Tab>
</Tabs>

***

### Advance

For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widgets to fit your exact needs and application aesthetics. You can create and define your own widget and then incorporate those into the widget.

***

#### SubTitleView

You can customize the subtitle view for each item to meet your specific preferences and needs.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetails(
      user: User(
          uid: "uid",
          name: "name",
          status: "Online"
      ),
      subtitleView: ({BuildContext? context, Group? group, User? user}) {
        return const Row(
          children: [
            Icon(Icons.call, color: Color(0xFF6851D6), size: 25,),
            SizedBox(width: 10),
            Icon(Icons.video_call, color: Color(0xFF6851D6), size: 25,),
          ],
        );
      }
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/B3XaZtq031kOZfI6/images/d21541b7-user_details_subtitle_view_state_cometchat_screens-5d2fc66405da95b6e39f632e32298ab2.png?fit=max&auto=format&n=B3XaZtq031kOZfI6&q=85&s=bb9e32f3701d0d1ca02909e8054786b8" alt="Image" width="4498" height="3121" data-path="images/d21541b7-user_details_subtitle_view_state_cometchat_screens-5d2fc66405da95b6e39f632e32298ab2.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/0zf0AzyXRy6UbTAi/images/e836c98b-user_details_subtitle_view_state_cometchat_screens-e89cb3dbe3b5a116220292817316625f.png?fit=max&auto=format&n=0zf0AzyXRy6UbTAi&q=85&s=dbd61a6558811610a011291061e49d52" alt="Image" width="4498" height="3121" data-path="images/e836c98b-user_details_subtitle_view_state_cometchat_screens-e89cb3dbe3b5a116220292817316625f.png" />
  </Tab>
</Tabs>

***

#### CustomProfileView 🛑

Tailor the custom profile view for each user item to suit your specific preferences and needs.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetails(
      user: User(
          uid: "uid",
          name: "name",
          status: "Online"
      ),
      customProfileView: Container(
        height: 80,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
            color: Color(0xFFE4EBF5),
            border: Border.all(width: 1, color: Colors.black)
        ),
        child: Center(
            child: Text("Your Custom Profile View")
        ),
      ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/UjSEcX5SVba0Fjni/images/ffdeaf32-user_details_custom_profile_view_cometchat_screens-1e7572dd65de471b66a5baea864a35df.png?fit=max&auto=format&n=UjSEcX5SVba0Fjni&q=85&s=cf0fa9af8284c99910cd31ab382c3b57" alt="Image" width="4498" height="3121" data-path="images/ffdeaf32-user_details_custom_profile_view_cometchat_screens-1e7572dd65de471b66a5baea864a35df.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/P-fnFPeZIhsNyk74/images/c4bf757e-user_details_custom_profile_view_cometchat_screens-1d432afa21ca855d3017da8f3aaf9efe.png?fit=max&auto=format&n=P-fnFPeZIhsNyk74&q=85&s=78e1ecd27183b5f63555e3b8415b4e6b" alt="Image" width="4498" height="3121" data-path="images/c4bf757e-user_details_custom_profile_view_cometchat_screens-1d432afa21ca855d3017da8f3aaf9efe.png" />
  </Tab>
</Tabs>

***

#### DetailsOption

The `CometChatDetailsOption` defines the structure for individual options within the CometChat details widget, facilitating customization and functionality for user interactions.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetailsOption option = CometChatDetailsOption(
        id: "OPTION_ID",
        onClick: (user, group, section, state) {},
        tail: Icon(
            Icons.abc_rounded,
            color: Colors.pink,
        ),
        title: "CUSTOM OPTION",
        titleStyle: TextStyle(
            backgroundColor: Colors.lightBlue.shade200,
            fontWeight: FontWeight.bold
        ),
        icon: AssetConstants.heart,
        packageName: UIConstants.packageName
    );
    ```
  </Tab>
</Tabs>

This defines the structure of each option for a template in the details widget.

| Property      | Data Type                                                                                       | Description                                                     |
| ------------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
| `customView`  | `Widget?`                                                                                       | Custom view widget for the details option.                      |
| `tail`        | `Widget?`                                                                                       | Tail widget for the details option.                             |
| `height`      | `double?`                                                                                       | Height of the details option.                                   |
| `onClick`     | `Function(User? user, Group? group, String section, CometChatDetailsControllerProtocol state)?` | Callback function triggered when the details option is clicked. |
| `id`          | `String`                                                                                        | Unique identifier for the details option.                       |
| `title`       | `String?`                                                                                       | Title of the details option.                                    |
| `icon`        | `String?`                                                                                       | URL or asset name for the icon of the details option.           |
| `packageName` | `String?`                                                                                       | Package name associated with the details option.                |
| `titleStyle`  | `TextStyle?`                                                                                    | Text style for the title of the details option.                 |

***

#### DetailsTemplate 🛑

The `CometChatDetailsTemplate` offers a structure for organizing information in the CometChat details widget. It serves as a blueprint, defining how user-related details are presented. This structure allows for customization and organization within the CometChat interface.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetailsTemplate template = CometChatDetailsTemplate(
        id: "TEMPLATE_ID",
        hideItemSeparator: false,
        hideSectionSeparator: false,
        itemSeparatorColor: Colors.deepOrange,
        sectionSeparatorColor: Colors.pink,
        title: "CUSTOM TEMPLATE",
        titleStyle: TextStyle(
            backgroundColor: Colors.yellow,
            fontWeight: FontWeight.bold
        ),
        options: (user, group, context, theme) => [option],
    );
    ```
  </Tab>
</Tabs>

##### Complete Example of Options and Template

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDetails(
      user: User(
          uid: "uid",
          name: "name",
          status: "Online"
      ),
      data: (group, user) {
        //Create Options
        CometChatDetailsOption option = CometChatDetailsOption(
            id: "OPTION_ID",
            onClick: (user, group, section, state) {},
            tail: Icon(
              Icons.abc_rounded,
              color: Colors.pink,
            ),
            title: "CUSTOM OPTION",
            titleStyle: TextStyle(
                backgroundColor: Colors.lightBlue.shade200,
                fontWeight: FontWeight.bold
            ),
            icon: AssetConstants.heart,
            packageName: UIConstants.packageName
        );

        //Create Template and add the options in it
        CometChatDetailsTemplate template = CometChatDetailsTemplate(
          id: "TEMPLATE_ID",
          hideItemSeparator: false,
          hideSectionSeparator: false,
          itemSeparatorColor: Colors.deepOrange,
          sectionSeparatorColor: Colors.pink,
          title: "CUSTOM TEMPLATE",
          titleStyle: TextStyle(
              backgroundColor: Colors.yellow,
              fontWeight: FontWeight.bold
          ),
          options: (user, group, context, theme) => [option],
        );

        //Return the template list
        return [template];
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/-S5qACEOIWfW5CsV/images/7d528ac5-user_details_template_cometchat_screens-8c6ef5ed12a92603e1dc1d7cfeb14d2a.png?fit=max&auto=format&n=-S5qACEOIWfW5CsV&q=85&s=b4423bb033b51a799016fffbb41ecfb8" alt="Image" width="4498" height="3121" data-path="images/7d528ac5-user_details_template_cometchat_screens-8c6ef5ed12a92603e1dc1d7cfeb14d2a.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/cD2BDn03AOl0XRHO/images/054084a7-user_details_template_cometchat_screens-f5dfb2fdea2c1e8bb12256c363cde910.png?fit=max&auto=format&n=cD2BDn03AOl0XRHO&q=85&s=7686361830374564a81afab71b1d78f7" alt="Image" width="4498" height="3121" data-path="images/054084a7-user_details_template_cometchat_screens-f5dfb2fdea2c1e8bb12256c363cde910.png" />
  </Tab>
</Tabs>

***