CometChatActionSheet is a DraggableScrollableSheet which shows each ActionItem and returns the ActionItem that is clicked on . You can customize the appearance of CometChatActionSheet too.

​
How to integrate CometChatActionSheet ?

Since CometChatActionSheet is a DraggableScrollableSheet , it can be called directly by using showCometChatActionSheet method. CometChatActionSheet includes various parameters to customize its UI.

​
Usage

ActionItem? item = await showCometChatActionSheet(
  context: context,
  actionItems: <actionList>,
  titleStyle: TextStyle(
    fontSize: 17,
    fontWeight: FontWeight.w500,
    color: cometChatTheme.palette.getAccent()
  ),
  backgroundColor: cometChatTheme.palette.getBackground(),
  iconBackground: cometChatTheme.palette.getAccent100(),
  layoutIconColor: cometChatTheme.palette.getPrimary()
);

​
Properties

ParametersTypeDescription
contextBuildContextUsed to set the location in the widget where the AcionSheet needs to be shown
backgroundColorColorUsed to set background color
actionItemsList<ActionItem>Used to set list of action items
iconBackgroundColorUsed to set icon background color
titleStringUsed to set title
titleStyleTextStyleUsed to set title style
isLayoutModeIconVisibleboolUsed to toggle visibility of layout mode icon
layoutModeIconIconDataused to set the icon to display
layoutIconColorColorUsed to set layout Mode Icon Color
isTitleVisibleboolUsed to toggle title visibility
isGridLayoutboolUsed to toggle between list view or grid view
alertShapeBorderShapeBorderUsed to shape ActionSheet

​
ActionItem

ActionItem is the model class used to pass data at different places such as CometChatActionSheet.A list of ActionItem is passed to the CometChatActionSheet which renders it according to the styling parameters passed

​
Properties

ParametersTypeDescription
idStringUsed to uniquely identify each ActionItem
titleStringUsed to set the title visible against each ActionItem
iconUrlStringUsed to set IconUrl
iconUrlPackageNameStringUsed to set IconUrl package name , used only when
titleStyleTextStyleUsed to set title style
iconBackgroundColorUsed to set icon background
iconCornerRadiusdoubleUsed to set icon corner radius
backgroundColorUsed to set background color
cornerRadiusdoubleUsed to set corner radius
onItemClickdynamican parameter to hold any extra data with each ActionItem , internally used to set functions which are invoked later
If dart compiler is not able to identify ActionItem from the chat ui kit package because its conflicting with other imports, alias can be created as import 'package:flutter_chat_ui_kit/flutter_chat_ui_kit.dart' as uikit; > > and used like uikit.ActionItem wherever needed
// new Alias created
import 'package:flutter_chat_ui_kit_flutter_chat_ui_kit.dart' as uikit;

uikit.ActionItem  item1  = uikit.ActionItem(
    id:<id1>,
    title: <title1>,
    background: <backgroundColor>,
    cornerRadius: <cornerRadius>,
    onItemClick: (){
      // any function you want to perform
    }
);

uikit.ActionItem  item2  = uikit.ActionItem(
    id:<id2>,
    title: <title2>,
    background: <backgroundColor>,
    cornerRadius: <cornerRadius>,
    onItemClick: (){
      // any function you want to perform
    }
);

List<uikit.ActionItem> actionList = [item1, item2];

uikit.ActionItem? item = await showCometChatActionSheet(
  context: context,
  actionItems: actionList,
  titleStyle: TextStyle(
    fontSize: 17,
    fontWeight: FontWeight.w500,
    color: cometChatTheme.palette.getAccent()
  ),
  backgroundColor: cometChatTheme.palette.getBackground(),
  iconBackground: cometChatTheme.palette.getAccent100(),
  layoutIconColor: cometChatTheme.palette.getPrimary()
);