Groups

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

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

  @override
  State<GroupChatApp> createState() => _GroupChatAppState();
}

class _GroupChatAppState extends State<GroupChatApp> {
  Group? selectedGroup;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          SizedBox(
            width: 400,
            child: CometChatGroups(
              onItemTap: (context, group) {
                setState(() {
                  selectedGroup = group;
                });
              },
            ),
          ),
          Expanded(
            child: selectedGroup != null
                ? CometChatMessages(group: selectedGroup)
                : const Center(child: Text('Select a group')),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

class GroupsDemo extends StatelessWidget {
  const GroupsDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: CometChatGroups(),
      ),
    );
  }
}

CometChatGroups(
  groupsRequestBuilder: GroupsRequestBuilder()
    ..joinedOnly = true
    ..limit = 10,
)

CometChatGroups(
  onItemTap: (context, group) {
    print("Selected: ${group.name}");
  },
)

CometChatGroups(
  onItemLongPress: (context, group) {
    // Show custom context menu
  },
)

CometChatGroups(
  selectionMode: SelectionMode.multiple,
  activateSelection: ActivateSelection.onClick,
  onSelection: (selectedList) {
    print("Selected ${selectedList?.length ?? 0} groups");
  },
)

CometChatGroups(
  onError: (error) {
    print("CometChatGroups error: $error");
  },
)

CometChatGroups(
  showBackButton: true,
  onBack: () {
    Navigator.pop(context);
  },
)

CometChatGroups(
  onLoad: (list) {
    print("Loaded ${list.length} groups");
  },
)

CometChatGroups(
  onEmpty: () {
    print("No groups found");
  },
)

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:cometchat_sdk/models/action.dart' as cc;

class _YourScreenState extends State<YourScreen> with CometChatGroupEventListener {

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

  @override
  void dispose() {
    CometChatGroupEvents.removeGroupsListener("listenerId");
    super.dispose();
  }

  @override
  void ccGroupCreated(Group group) {
    print("Group created: ${group.name}");
  }

  @override
  void ccGroupDeleted(Group group) {
    print("Group deleted: ${group.name}");
  }

  @override
  void ccGroupLeft(cc.Action message, User leftUser, Group leftGroup) {
    print("User ${leftUser.name} left ${leftGroup.name}");
  }

  @override
  void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
    print("User ${joinedUser.name} joined ${joinedGroup.name}");
  }

  @override
  void ccOwnershipChanged(Group group, GroupMember newOwner) {
    print("Ownership of ${group.name} transferred to ${newOwner.name}");
  }

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

CometChatGroups(
  listItemView: (group) {
    return ListTile(
      title: Text(
        group.name,
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
      ),
      subtitle: Text(
        "${group.membersCount} Members • ${group.description}",
        overflow: TextOverflow.ellipsis,
        style: TextStyle(fontSize: 14, color: Color(0xFF727272)),
      ),
      trailing: ElevatedButton(
        onPressed: () {
          CometChat.joinGroup(
            group.guid,
            group.type,
            onSuccess: (group) {
              // Handle success
            },
            onError: (error) {
              // Handle error
            },
          );
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: Color(0xFFEDEAFA),
          elevation: 0,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1000)),
        ),
        child: Text("JOIN", style: TextStyle(color: Color(0xFF6852D6), fontSize: 12)),
      ),
    );
  },
)

CometChatGroups(
  leadingView: (context, group) {
    return Stack(
      children: [
        CometChatAvatar(
          image: group.icon,
          name: group.name,
          style: CometChatAvatarStyle(borderRadius: BorderRadius.circular(8)),
        ),
        if (group.hasJoined)
          Positioned(
            bottom: -2,
            left: 0,
            right: 0,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
              decoration: BoxDecoration(color: Color(0xFF09C26F)),
              child: Text(
                "Joined",
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
              ),
            ),
          ),
      ],
    );
  },
)

CometChatGroups(
  titleView: (context, group) {
    return Row(
      children: [
        Text(
          group.name,
          style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
        ),
        SizedBox(width: 4),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
          decoration: BoxDecoration(
            color: group.type == GroupTypeConstants.public 
                ? Color(0xFF0B7BEA) 
                : Color(0xFF09C26F),
            borderRadius: BorderRadius.circular(7),
          ),
          child: Text(
            group.type,
            style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
          ),
        ),
      ],
    );
  },
)

CometChatGroups(
  subtitleView: (context, group) {
    return Text(
      "${group.membersCount} Members • ${group.description ?? 'No description'}",
      overflow: TextOverflow.ellipsis,
      style: TextStyle(fontSize: 14, color: Color(0xFF727272)),
    );
  },
)

CometChatGroups(
  trailingView: (context, group) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
      decoration: BoxDecoration(
        color: Color(0xFFEDEAFA),
        borderRadius: BorderRadius.circular(1000),
      ),
      child: Text(
        group.hasJoined ? "JOINED" : "+ JOIN",
        style: TextStyle(color: Color(0xFF6852D6), fontSize: 12, fontWeight: FontWeight.w700),
      ),
    );
  },
)

CometChatGroups(
  setOptions: (group, controller, context) {
    return [
      CometChatOption(
        id: "leave",
        title: "Leave Group",
        icon: AssetConstants.close,
        onClick: () {
          CometChat.leaveGroup(group.guid, onSuccess: (response) {
            print("Left group");
          }, onError: (error) {
            print("Error: $error");
          });
        },
      ),
      CometChatOption(
        id: "view_members",
        title: "View Members",
        iconWidget: Icon(Icons.people_outline),
        onClick: () {
          // Navigate to group members
        },
      ),
    ];
  },
)

CometChatGroups(
  addOptions: (group, controller, context) {
    return [
      CometChatOption(
        id: "mute",
        title: "Mute Notifications",
        iconWidget: Icon(Icons.notifications_off_outlined),
        onClick: () {
          // Mute notifications logic
        },
      ),
      CometChatOption(
        id: "pin",
        title: "Pin Group",
        iconWidget: Icon(Icons.push_pin_outlined),
        onClick: () {
          // Pin group logic
        },
      ),
    ];
  },
)

CometChatGroups(
  appBarOptions: (context) => [
    IconButton(
      onPressed: () {
        // Navigate to create group
      },
      icon: Icon(Icons.group_add, color: Color(0xFF6852D6)),
    ),
  ],
)

CometChatGroups(
  groupsStyle: CometChatGroupsStyle(
    backgroundColor: Colors.white,
    titleTextColor: Color(0xFFF76808),
    separatorColor: Color(0xFFF76808),
    avatarStyle: CometChatAvatarStyle(
      borderRadius: BorderRadius.circular(8),
      backgroundColor: Color(0xFFFBAA75),
    ),
  ),
)

CometChatGroups(
  emptyStateView: (context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.group_outlined, size: 64, color: Color(0xFF727272)),
          SizedBox(height: 16),
          Text("No groups found", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
          SizedBox(height: 8),
          ElevatedButton(
            onPressed: () {
              // Navigate to create group
            },
            child: Text("Create a Group"),
          ),
        ],
      ),
    );
  },
)

CometChatGroups(
  groupsRequestBuilder: GroupsRequestBuilder()
    ..joinedOnly = true,
)

CometChatGroups(
  selectionMode: SelectionMode.multiple,
  activateSelection: ActivateSelection.onClick,
  onSelection: (selectedGroups) {
    if (selectedGroups != null && selectedGroups.isNotEmpty) {
      print("Selected ${selectedGroups.length} groups");
      // Perform batch action on selected groups
    }
  },
)

CometChatGroups(
  hideSearch: true,
  hideAppbar: true,
  groupTypeVisibility: false,
)