Form Bubble
The CometChatFormBubble component is used to render a form within a chat bubble. The form fields are dynamically built based on the data passed in the message prop. The form fields can include TextInput Element, Label Element, Checkbox Element, Radio Button Element, Dropdown, Single Select Element, Button Element. Once the form is filled out and submitted, the data will be sent to the provided URL or handled by a custom function.
Properties
| Properties | Type | Description |
|---|---|---|
| title | String | |
| formMessage | FormMessage | An instance of the FormMessage class which holds information about the form fields. The form inputs are dynamically built based on the form fields' information in the message. |
| formBubbleStyle | FormBubbleStyle | An object of styles for customizing the UI of the form bubble. You can override styles for the wrapper, title, goal completion text, and form inputs, etc. If a style is not provided, the default style will be used. |
| onSubmitTap | Function(Map<String, dynamic>) | A parameter that defines if a custom callback is available or not. |
| theme | CometChatTheme | Passes theme to the form bubble. |
| loggedInUser | User | An instance of the logged-in user object. |
| QuickViewStyle | QuickViewStyle | An instance for setting goal completion styling properties. |
FormBubbleStyle
FormBubbleStyle is a class extending BaseStyle containing attributes to customize the appearance of the CometChatFormBubble component.
| Properties | Type | Description |
|---|---|---|
| dropDownElementStyle | DropDownElementStyle | Used to set the font style of the title. The object should include fontFamily, fontSize, and fontWeight. |
| submitButtonStyle | ButtonStyle | Used to set the color of the title. |
| buttonElementStyle | ButtonStyle | Used to set the background color of the message bubble. |
| labelStyle | TextStyle | Used to set the border radius of the message bubble. |
| textInputStyle | TextInputElementStyle | Used to set the padding of the message bubble. |
| checkBoxStyle | CheckBoxElementStyle | Used to set the font style of the goal completion text. The object should include fontFamily, fontSize, and fontWeight. |
| quickViewStyle | QuickViewStyle | Used to set the color of the goal completion text. |
Usage
- Dart
CometChatFormBubble(
formMessage: formMessage,
loggedInUser: loggedInUser, // replace this with the logged-in user
)