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.

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

File reference:
sample_app/lib/messages/messages.dart

Add “Block User” Button

Let users block another user via the SDK.

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

Add “Unblock User” Button

Allow users to undo the block.

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

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 methods like removeMembers and banMembers.

Summary / Feature Matrix

Feature	File	Method
Open User Info	sample_app/lib/messages/messages.dart	Navigator.push(...)
Block User	sample_app/lib/user_info/cometchat_user_info.dart	CometChatUIKit.blockUsers([...])
Unblock User	sample_app/lib/user_info/cometchat_user_info.dart	CometChatUIKit.unblockUsers([...])
Group Management	sample_app/lib/group_info/cometchat_group_info.dart	Group-related actions (not blocking)

Next Steps & Further Reading

Flutter Sample App

Fully functional sample applications to accelerate your development.

View on GitHub

UI Kit Source Code

Access the complete UI Kit source code on GitHub.

View on GitHub