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

# File Bubble

> File Bubble — CometChat documentation.

`CometChatFileBubble` is the content view for a [MediaMessage](/sdk/flutter/send-message#media-message) if the media sent is a file.

## Properties

| Properties | Type | Description |
| - | - | - |
| **fileUrl** | String | the path of the image to display |
| **fileMimeType** | String | the mime type of the file |
| **id** | int | id to make file name unique |
| **title** | String | a text to display as name of the file |
| **subtitle** | String | a text to display below the name of the file |
| **downloadIcon** | Icon | customize the icon to display to download the file |
| **style** | [FileBubbleStyle](/ui-kit/flutter/v4/file-bubble#filebubblestyle) | used to customize appearance of this widget |
| **theme** | [CometChatTheme](/ui-kit/flutter/v4/theme) | used to set custom theme |

***

## FileBubbleStyle

FileBubbleStyle is the class containing attributes to customize appearance of this widget.

| Properties | Type | Description |
| - | - | - |
| **titleStyle** | TextStyle | used to set style of the name of the file |
| **subtitleStyle** | TextStyle | used to set style of the text below the name of the file |
| **downloadIconTint** | Color | used to provide color to the download icon |
| **height** | double | used to set height |
| **width** | double | used to set width |
| **background** | Color | used to set background color |
| **gradient** | Gradient | used to set a gradient background |
| **border** | BoxBorder | used to set border |
| **borderRadius** | double | used to set border radius |

***

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatFileBubble(
        theme: cometChatTheme,
        fileUrl: 'https://images.pexels.com/photos/1496372/pexels-photo-1496372.jpeg',
        title: 'File bubble',
        style: const FileBubbleStyle(borderRadius: 6),
    )
    ```
  </Tab>
</Tabs>


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