> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Action Sheet

> Action Sheet — CometChat documentation.

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/cTCXebw8IhR7IiJw/images/4268fc8f-e9zq3ahstzpzyj3uzmqbxun0yzkkntaxcx16kyz2yrvpy3zbi524vf8sq6ai1m46-274dc54162b153d25c1e697168cad6e1.png?fit=max&auto=format&n=cTCXebw8IhR7IiJw&q=85&s=17e9b709927b66bea88d177093a1dc82" width="404" height="647" data-path="images/4268fc8f-e9zq3ahstzpzyj3uzmqbxun0yzkkntaxcx16kyz2yrvpy3zbi524vf8sq6ai1m46-274dc54162b153d25c1e697168cad6e1.png" />
</Frame>

## 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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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()
    );
    ```
  </Tab>
</Tabs>

### Properties

| Parameters | Type | Description |
| - | - | - |
| **context** | BuildContext | Used to set the location in the widget where the `AcionSheet needs to be shown` |
| **backgroundColor** | Color | Used to set background color |
| **actionItems** | List\<ActionItem> | Used to set list of action items |
| **iconBackground** | Color | Used to set icon background color |
| **title** | String | Used to set title |
| **titleStyle** | TextStyle | Used to set title style |
| **isLayoutModeIconVisible** | bool | Used to toggle visibility of layout mode icon |
| **layoutModeIcon** | IconData | used to set the icon to display |
| **layoutIconColor** | Color | Used to set layout Mode Icon Color |
| **isTitleVisible** | bool | Used to toggle title visibility |
| **isGridLayout** | bool | Used to toggle between list view or grid view |
| **alertShapeBorder** | ShapeBorder | Used 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

| Parameters | Type | Description |
| - | - | - |
| **id** | String | Used to uniquely identify each `ActionItem` |
| **title** | String | Used to set the title visible against each `ActionItem` |
| **iconUrl** | String | Used to set IconUrl |
| **iconUrlPackageName** | String | Used to set IconUrl package name , used only when |
| **titleStyle** | TextStyle | Used to set title style |
| **iconBackground** | Color | Used to set icon background |
| **iconCornerRadius** | double | Used to set icon corner radius |
| **background** | Color | Used to set background color |
| **cornerRadius** | double | Used to set corner radius |
| **onItemClick** | dynamic | an parameter to hold any extra data with each `ActionItem` , internally used to set functions which are invoked later |

<Note>
  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
</Note>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    // 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()
    );
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.