> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Implementing Block/Unblock User in Flutter with CometChat UIKit

Enable users to block and unblock other users in your Flutter chat app by integrating CometChat’s `blockUsers` and `unblockUsers` methods with a simple UI.

## Overview

The Block User feature lets one user prevent another from sending messages or interacting with them. Essential for user privacy, spam control, and moderation in public or group chats. Users tap “Block” or “Unblock,” and the CometChat SDK enforces the block state.

## Prerequisites

* A Flutter project with **CometChat UIKit Flutter v5** installed
* Initialized CometChat credentials (`appID`, `region`, `authKey`)
* Navigation set up between your chat list and user-info screen (`lib/messages.dart`)

## Components

| Component                            | Role                                              |
| :----------------------------------- | :------------------------------------------------ |
| `CometChatUserInfo`                  | Displays user profile with block/unblock controls |
| `CometChatUIKit.blockUsers([...])`   | SDK method to block specified user(s)             |
| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s)           |
| `ElevatedButton`                     | Flutter widget for block/unblock actions          |

## Integration Steps

### Navigate to User Info Screen

Open the user-info screen when tapping the info icon in chat.

```dart theme={null}
IconButton(
  icon: Icon(Icons.info_outline),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => CometChatUserInfo(user: tappedUser),
      ),
    );
  },
);
```

**File reference:**\
[`sample_app/lib/messages/messages.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)

### Add “Block User” Button

Let users block another user via the SDK.

```dart theme={null}
ElevatedButton(
  onPressed: () async {
    try {
      await CometChatUIKit.blockUsers([user.uid]);
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('\${user.name} has been blocked')),
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error blocking user: \$e')),
      );
    }
  },
  child: Text('Block User'),
);
```

**File reference:**\
[`sample_app/lib/user_info/cometchat_user_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)

### Add “Unblock User” Button

Allow users to undo the block.

```dart theme={null}
ElevatedButton(
  onPressed: () async {
    try {
      await CometChatUIKit.unblockUsers([user.uid]);
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('\${user.name} has been unblocked')),
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error unblocking user: \$e')),
      );
    }
  },
  child: Text('Unblock User'),
);
```

**File reference:**\
[`sample_app/lib/user_info/cometchat_user_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)

## Customization Options

* **Button Styling:** Use `ElevatedButton.styleFrom(...)` to customize colors, padding, and shape.
* **Conditional Rendering:** Display “Block” or “Unblock” based on `user.blockedByMe` state.
* **Modal Confirmation:** Wrap actions in `showDialog` for “Are you sure?” prompts.

## Filtering / Edge Cases

* **Self-Block Prevention:** Disable the button if `user.uid == loggedInUser.uid`.
* **Offline Users:** Optionally disable or queue actions when network is unavailable.

## Error Handling & Blocked-User Handling

* **SnackBars:** Show success or error messages via `ScaffoldMessenger`.
* **Retry Logic:** Offer a “Retry” action in the SnackBar on failure.
* **UI State:** Disable the button while the SDK call is in progress to prevent duplicates.

## Optional Context-Specific Notes

**Group vs. User Blocking:**\
This guide covers only user-to-user blocking. For group moderation (ban or remove members), see [`sample_app/lib/group_info/cometchat_group_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) methods like `removeMembers` and `banMembers`.

## Summary / Feature Matrix

| Feature          | File                                                                                                                                                                        | Method                               |
| :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------- |
| Open User Info   | [sample\_app/lib/messages/messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)                                | `Navigator.push(...)`                |
| Block User       | [sample\_app/lib/user\_info/cometchat\_user\_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)     | `CometChatUIKit.blockUsers([...])`   |
| Unblock User     | [sample\_app/lib/user\_info/cometchat\_user\_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)     | `CometChatUIKit.unblockUsers([...])` |
| Group Management | [sample\_app/lib/group\_info/cometchat\_group\_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) | Group-related actions (not blocking) |

## Next Steps & Further Reading

<CardGroup>
  <Card title="Flutter Sample App">
    Fully functional sample applications to accelerate your development.

    [View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
  </Card>

  <Card title="UI Kit Source Code">
    Access the complete UI Kit source code on GitHub.

    [View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit)
  </Card>
</CardGroup>