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

# Join Protected Group

## Overview

`CometChatJoinProtectedGroup` is a [Widget](/ui-kit/flutter/v4/components-overview#components) used to set up a screen that shows the functionality to join a password protected group, featuring the functionality to join a password-protected group, where users can join a single password-protected group at a time.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/1x5WCwa1kpsipYwF/images/2d323550-join_protected_group_overview_cometchat_screens-bd4917cdd19d8c273905f75c6c80a0a4.png?fit=max&auto=format&n=1x5WCwa1kpsipYwF&q=85&s=b05fec745d416cf29a17fe08160df175" alt="Image" width="4498" height="3121" data-path="images/2d323550-join_protected_group_overview_cometchat_screens-bd4917cdd19d8c273905f75c6c80a0a4.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/-s_AEnuh4XXBBZM1/images/34dec4f8-join_protected_group_overview_cometchat_screens-adba7b46c6bd241e993d2fce99b2669f.png?fit=max&auto=format&n=-s_AEnuh4XXBBZM1&q=85&s=8b4a0ad25fad34e85c5c45d0590bff4b" alt="Image" width="4498" height="3121" data-path="images/34dec4f8-join_protected_group_overview_cometchat_screens-adba7b46c6bd241e993d2fce99b2669f.png" />
  </Tab>
</Tabs>

The `CometChatJoinProtectedGroup` widget is composed of the following Base Widgets:

| Widgets                                           | Description                                                                                                                                                                                                                                                                                                                                                |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [CometChatListBase](/ui-kit/flutter/v4/list-base) | `CometChatListBase` serves as a comprehensive container widget, encompassing essential elements such as a title (navigationBar), search functionality (search-bar), background, and a container to embed a list widget. This design provides a cohesive and intuitive user experience, facilitating seamless navigation and interaction within the widget. |

## Usage

### Integration

`CometChatJoinProtectedGroup`, as a Composite Widget, offers flexible integration options, allowing it to be launched directly via button clicks or any user-triggered action. Additionally, it seamlessly integrates into tab widget controllers. With join group, users gain access to a wide range of parameters and methods for effortless customization of its user interface.

You can launch `CometChatJoinProtectedGroup` 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 `CometChatJoinProtectedGroup`

<Tabs>
  <Tab title="Dart">
    ```dart
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatJoinProtectedGroup(group: Group(guid: "", name: "", type: "")))); // A group object is required to launch this widget.
    ```
  </Tab>
</Tabs>

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

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

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

      @override
      State<JoinProtectedGroup> createState() => _JoinProtectedGroupState();
    }

    class _JoinProtectedGroupState extends State<JoinProtectedGroup> {

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: SafeArea(
                child: CometChatJoinProtectedGroup(
                  group: Group(guid: "", name: "", type: ""),
                ) // A group object is required to launch this widget.
            )
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

### Actions

##### 1. onJoinTap

The `onJoinTap` action is activated when you click the join Group button. This returns the join groups.

You can override this action using the following code snippet.

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatJoinProtectedGroup(
      group: Group(guid: "", name: "", type: ""), // A group object is required to launch this widget.
      onJoinTap: ({Group? group, String? password}) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### 2. onBack

Enhance your application's functionality by leveraging the `onBack` feature. This capability allows you to customize the behavior associated with navigating back within your app. Utilize the provided code snippet to override default behaviors and tailor the user experience according to your specific requirements.

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatJoinProtectedGroup(
      group: Group(guid: "", name: "", type: ""), // A group object is required to launch this widget.
      onBack: () {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### 3. onError

You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatJoinProtectedGroup(
      group: Group(guid: "", name: "", type: ""), // A group object is required to launch this widget.
      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.

The `CometChatJoinProtectedGroup` widget does not have any exposed 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.

Events emitted by the Join Group widget is as follows.

| Event                   | Description                                                  |
| ----------------------- | ------------------------------------------------------------ |
| **ccGroupMemberJoined** | Triggers when the user joined a protected group successfully |

**Example**

<Tabs>
  <Tab title="Dart">
    ```dart your_screen.dart
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:cometchat_sdk/models/action.dart' as cc;
    import 'package:flutter/material.dart';

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

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

    class _YourScreenState extends State<YourScreen> with CometChatGroupEventListener {

      @override
      void initState() {
        super.initState();
        CometChatGroupEvents.addGroupsListener("listenerId", this); // Add the listener
      }

      @override
      void dispose(){
        super.dispose();
        CometChatGroupEvents.removeGroupsListener("listenerId"); // Remove the listener
      }

      @override
      void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
        // 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 Groups 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 widget in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the widget.

##### 1. JoinProtectedGroup Style 🛑

You can set the `JoinProtectedGroupStyle` to the `CometChatJoinProtectedGroup` Widget to customize the styling.

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatJoinProtectedGroup(
      group: Group(guid: "", name: "", type: ""), // A group object is required to launch this widget.
      joinProtectedGroupStyle: JoinProtectedGroupStyle(
        background: Color(0xFFE4EBF5),
        titleStyle: TextStyle(color: Colors.red)
      ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/UKBwCEIWGRe-S0eD/images/08b3fdcc-join_protected_group_style_cometchat_screens-af8fdb7df4a2ce0455db143e751b87cf.png?fit=max&auto=format&n=UKBwCEIWGRe-S0eD&q=85&s=a4518638a852b2662e888d5cc36ea5b7" alt="Image" width="4498" height="3121" data-path="images/08b3fdcc-join_protected_group_style_cometchat_screens-af8fdb7df4a2ce0455db143e751b87cf.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/N8MeW-NyvAe59xm0/images/b58aa087-join_protected_group_style_cometchat_screens-4c579350b2762f59def7e0d572dd04b9.png?fit=max&auto=format&n=N8MeW-NyvAe59xm0&q=85&s=6e11004bc60a3902a4e39558aa8b69c0" alt="Image" width="4498" height="3121" data-path="images/b58aa087-join_protected_group_style_cometchat_screens-4c579350b2762f59def7e0d572dd04b9.png" />
  </Tab>
</Tabs>

List of properties exposed by JoinProtectedGroupStyle

| Property                       | Description                      | Code                                   |
| ------------------------------ | -------------------------------- | -------------------------------------- |
| **Background**                 | Background value                 | `background: Color?`                   |
| **Border**                     | Border value                     | `border: Border?`                      |
| **Border Radius**              | Border Radius value              | `borderRadius: BorderRadius?`          |
| **Border Width**               | Border Width value               | `border: Border?`                      |
| **Close Icon Tint**            | Close Icon Tint value            | `closeIconTint: Color?`                |
| **Description Text Style**     | Description Text Style value     | `descriptionTextStyle: TextStyle?`     |
| **Error Text Style**           | Error Text Style value           | `errorTextStyle: TextStyle?`           |
| **Gradient**                   | Gradient value                   | `gradient: Gradient?`                  |
| **Height**                     | Height value                     | `height: double?`                      |
| **Input Border Color**         | Input Border Color value         | `inputBorderColor: Color?`             |
| **Join Icon Tint**             | Join Icon Tint value             | `joinIconTint: Color?`                 |
| **Password Input Text Style**  | Password Input Text Style value  | `passwordInputTextStyle: TextStyle?`   |
| **Password Placeholder Style** | Password Placeholder Style value | `passwordPlaceholderStyle: TextStyle?` |
| **Title Style**                | Title Style value                | `titleStyle: TextStyle?`               |
| **Width**                      | Width value                      | `width: double?`                       |

***

### 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="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/Dm24zH4UzrotLPe3/images/ded1dd74-join_protected_group_functionality_cometchat_screens-61078ba4dea600d5e7b64a8fc2570111.png?fit=max&auto=format&n=Dm24zH4UzrotLPe3&q=85&s=14fae03607c50463ba68ebcbe4a36096" alt="Image" width="4498" height="3121" data-path="images/ded1dd74-join_protected_group_functionality_cometchat_screens-61078ba4dea600d5e7b64a8fc2570111.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/RQuAAwafAEZKdX3m/images/91ea96e7-join_protected_group_functionality_cometchat_screens-f2030163f2a4ba652bae69a6f0a64c1d.png?fit=max&auto=format&n=RQuAAwafAEZKdX3m&q=85&s=63494e5d0f282e17002ade9fcc81c059" alt="Image" width="4498" height="3121" data-path="images/91ea96e7-join_protected_group_functionality_cometchat_screens-f2030163f2a4ba652bae69a6f0a64c1d.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatJoinProtectedGroup(
        group: Group(guid: "", name: "", type: ""), // A group object is required to launch this widget.
        title: "Your Title",
        passwordPlaceholderText: "Password Placeholder Text",
        closeIcon: Icon(Icons.close_fullscreen_sharp, color: Color(0xFF6851D6))
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/18q2h91RI8aL99f3/images/ad7557e4-join_protected_functionality_after_cometchat_screens-557fac1f39545fbeab1099c41ff7d5a9.png?fit=max&auto=format&n=18q2h91RI8aL99f3&q=85&s=3c7ac56cd3c82e0ecf59b60c5fdb52bc" alt="Image" width="4498" height="3121" data-path="images/ad7557e4-join_protected_functionality_after_cometchat_screens-557fac1f39545fbeab1099c41ff7d5a9.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/92Fah9yFnGL8YFzw/images/de0e5664-join_protected_functionality_after_cometchat_screens-99f47ca3c78c8a454650b6a2f2e2fd06.png?fit=max&auto=format&n=92Fah9yFnGL8YFzw&q=85&s=1bcfcadfc267de1c5d0d96d42ba05c7d" alt="Image" width="4498" height="3121" data-path="images/de0e5664-join_protected_functionality_after_cometchat_screens-99f47ca3c78c8a454650b6a2f2e2fd06.png" />
  </Tab>
</Tabs>

This table provides a quick overview of the available customization options for the `CometChatJoinProtectedGroup` class.

| Property                      | Description                                             | Code                               |
| ----------------------------- | ------------------------------------------------------- | ---------------------------------- |
| **Border Width**              | Sets the width of the border.                           | `borderWidth: double?`             |
| **Close Icon**                | Replaces the default back button with a custom widget.  | `closeIcon: Widget?`               |
| **Description**               | Sets the description text displayed below the title.    | `description: String?`             |
| **Error State Text**          | Sets the text displayed when an error occurs.           | `errorStateText: String?`          |
| **Join Icon**                 | Replaces the default join icon with a custom widget.    | `joinIcon: Widget?`                |
| **Password Placeholder Text** | Sets the placeholder text for the password input field. | `passwordPlaceholderText: String?` |
| **Title**                     | Sets the title text displayed at the top of the widget. | `title: String?`                   |

### Advanced

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

The `CometChatJoinProtectedGroup` widget does not provide additional functionalities beyond this level of customization.

***