​
Overview

CometChatCreateGroup serves as a versatile Widget, empowering users to create diverse group types, encompassing public, private, and password-protected options. This functionality grants users the flexibility to tailor their group settings to suit their preferences and requirements.
Image
The CometChatCreateGroup widget is composed of the following Base Widget:
WidgetsDescription
CometChatListBaseCometChatListBase 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

CometChatCreateGroup, as a is 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 activities and fragments. With CometChatCreateGroup, users gain access to a wide range of parameters and methods for effortless customization of its user interface. You can launch CometChatCreateGroup 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 CometChatCreateGroup
Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatCreateGroup()));
2. Embedding CometChatCreateGroup as a Widget in the build Method
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';

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

  @override
  State<CreateGroup> createState() => _CreateGroupState();
}

class _CreateGroupState extends State<CreateGroup> {

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

​
Actions

Actions dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
1. onCreateTap
The onCreateTap action is activated when you click the create Group button. This returns the created groups. You can override this action using the following code snippet. 
CometChatCreateGroup(
  onCreateTap: (group) {
    // TODO("Not yet implemented")
  },
)
2. onError
You can customize this behavior by using the provided code snippet to override the On Error and improve error handling. 
CometChatCreateGroup(
  onError: (e) {
    // TODO("Not yet implemented")
  },
)
3. 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. 
CometChatCreateGroup(
  onBack: () {
    // TODO("Not yet implemented")
  },
)

​
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 CreateGroup widget does not have any exposed filters. Events are emitted by a Widget. By using CometChatGroupEvents 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 Create Group widget is as follows.
EventDescription
ccGroupCreated(Group group)This event will be triggered when the logged-in user initiates the creation of a group.
Example 
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 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 ccGroupCreated(Group group) {
    // TODO("Not yet implemented")
  }

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

​
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. CreateGroup Style 🛑
CometChatCreateGroup(
  createGroupStyle: CreateGroupStyle(
    background: Color(0xFFE4EBF5),
    titleTextStyle: TextStyle(color: Colors.red, fontFamily: "PlaywritePL"),
    borderColor: Colors.red,
    borderRadius: 20,
    selectedTabTextStyle: TextStyle(color: Colors.red, fontFamily: "PlaywritePL"),
  ),
)
You can set the CreateGroupStyle to the CometChatCreateGroup Widget to customize the styling.
PropertyDescriptionCode
Border ColorProvides color to borderborderColor: Color?
Close Icon TintProvides color to back iconcloseIconTint: Color?
Create Icon TintProvides color to create iconcreateIconTint: Color?
Name Input Text StyleProvides styling for the text in the name input fieldnameInputTextStyle: TextStyle?
Name Placeholder Text StyleProvides styling for the hint text in the name text input fieldnamePlaceholderTextStyle: TextStyle?
Password Input Text StyleProvides styling for the text in the password input fieldpasswordInputTextStyle: TextStyle?
Password Placeholder Text StyleProvides styling for the hint text in the password text input fieldpasswordPlaceholderTextStyle: TextStyle?
Selected Tab ColorProvides color to the active/selected tabselectedTabColor: Color?
Selected Tab Text StyleProvides styling for the text in the active/selected tabselectedTabTextStyle: TextStyle?
Tab ColorProvides color to the inactive/unselected tabstabColor: Color?
Tab Text StyleProvides styling for the text in the inactive/unselected tabtabTextStyle: TextStyle?
Title Text StyleProvides styling for title texttitleTextStyle: TextStyle?

​
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. 
CometChatCreateGroup(
    title: "Your Title",
    namePlaceholderText: "Placeholder Text",
    passwordPlaceholderText: "Password Placeholder Text",
    createIcon: Icon(Icons.create, color: Color(0xFF6851D6)),
    closeIcon: Icon(Icons.close_fullscreen_sharp, color: Color(0xFF6851D6))
)
Image
List of functionality exposed by CometChatCreateGroup
PropertyDescriptionCode
Close IconUsed to set back button iconcloseIcon: Widget?
Create IconUsed to set create group iconcreateIcon: Widget?
Disable Close ButtonUsed to toggle visibility for back buttondisableCloseButton: bool?
Name Placeholder TextUsed to customize the hint text for the name input field in protected group formnamePlaceholderText: String?
Password Placeholder TextUsed to customize the hint text for the password input field in protected group formpasswordPlaceholderText: String?
ThemeUsed to set the theme of the widgettheme: CometChatTheme?
TitleUsed to set titletitle: 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 CometChatCreateGroup widget does not provide additional functionalities beyond this level of customization.