Message
You can edit 8 Components for free. Get premium for unlimited access.
A component to display messages within a chat.
Figma
The Message component is used to display your own or third-party messages within a chat.
1. Reference
This component inherits props from the Message.
2. Type
You can edit the type with the message or ownMessage parameter.
Image 2.1 : Type message
Image 2.2 : Type ownMessage
3. State
You can edit the state with the response or single parameter.
Image 3.1 : State single
Image 3.2 : State response
4. Author
You can edit the author with the true or false parameter.
Image 4.1 : Author false
Image 4.2 : Author true
Jetpack Compose
The Message component is used to display your own or third-party messages within a chat.
1. Reference
This component inherits props from the Message.
-
-
-
2. Type
You can edit the type with the .message or .ownMessage parameter.
message = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
type = MessageType.message,
author = "Thomas"
)
Message(
message = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
type = MessageType.ownMessage
)
2. State
You can edit the state with the .response or .single parameter.
message = "Lorem ipsum dolor sit amet.",
type = MessageType.message,
author = "Thomas",
state = MessageStatus.response(
author = "Andrew",
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
)
)
Message(
message = "Lorem ipsum dolor sit amet.",
type = MessageType.ownMessage,
state = MessageStatus.response(
author = "Andrew",
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
)
)
Preview
Preview
Code
DlMessage(
type: DlMessageType.ownMessage,
state: DlMessageState.single,
message: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
)Usage
Add this code example to your project to see how the component works.
DlMessage(
type: DlMessageType.ownMessage,
state: DlMessageState.response,
author: 'Author',
responseTitle: 'Joshua',
responseMessage: 'Looks great!',
message: 'Thanks for the feedback.',
)API Reference
DlMessage renders chat bubbles with message and ownMessage variants, optional author, and an optional response block layout.
Examples
Variants
Preview
Code
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
child: DlMessage(
type: DlMessageType.message,
author: 'Thomas',
message: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
),
),
SizedBox(height: 16),
child: DlMessage(
type: DlMessageType.ownMessage,
message: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
),
),
],
)Variants
Preview
Code
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
child: DlMessage(
type: DlMessageType.message,
state: DlMessageState.response,
author: 'Thomas',
responseTitle: 'Andrew',
responseMessage: 'Lorem ipsum dolor sit amet.',
message: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
),
),
SizedBox(height: 16),
child: DlMessage(
type: DlMessageType.ownMessage,
state: DlMessageState.response,
responseTitle: 'Andrew',
responseMessage: 'Lorem ipsum dolor sit amet.',
message: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
),
),
],
)Discover more content
You have questions or need help?
You want to try?
Save time and money?