Flutter Chat Bubble
Flutter widget for creating different types of chat bubble. You can use different properties of this Widget and create beautiful Chat Bubbles.
Usage
To use this plugin, add flutter_chat_bubble
as a dependency in your pubspec.yaml file.
Examples
ChatBubble widget use for create different chat bubbles. You can use below properties with bubbles.
Properties | Description |
---|
clipper | Different Custom clipper valuesChatBubbleClipper1 ,ChatBubbleClipper2 to ChatBubbleClipper10 |
child | Child of widget bubble |
margin | Empty space to surround the decoration. All possible options |
backGroundColor | Background color of widget |
elevation | Elevation of widget |
shadowColor | Shadow color of widget |
alignment | Align the child within the widget. All possible options |
Example 1
ChatBubble(
clipper: ChatBubbleClipper1(type: BubbleType.sendBubble),
alignment: Alignment.topRight,
margin: EdgeInsets.only(top: 20),
backGroundColor: Colors.blue,
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
style: TextStyle(color: Colors.white),
),
),
)
ChatBubble(
clipper: ChatBubbleClipper1(type: BubbleType.receiverBubble),
backGroundColor: Color(0xffE7E7ED),
margin: EdgeInsets.only(top: 20),
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Text(
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat",
style: TextStyle(color: Colors.black),
),
),
)
Properties of ChatBubbleClipper1 | Description |
---|
type | Values of clipper type BubbleType.sendBubble and BubbleType.receiverBubble |
radius | Radius of widget. Default value 10 |
nipHeight | Height of nip. Default value 10 |
nipWidth | Width of nip. Default value 15 |
nipRadius | Radius of nip. Default value 3 |
Example 2
ChatBubble(
clipper: ChatBubbleClipper2(type: BubbleType.sendBubble),
)
ChatBubble(
clipper: ChatBubbleClipper2(type: BubbleType.receiverBubble),
)
Properties of ChatBubbleClipper2 | Description |
---|
type | Values of clipper type BubbleType.sendBubble and BubbleType.receiverBubble |
radius | Radius of widget. Default value 10 |
nipHeight | Height of nip. Default value 10 |
nipWidth | Width of nip. Default value 15 |
nipRadius | Radius of nip. Default value 3 |
Example 3
ChatBubble(
clipper: ChatBubbleClipper3(type: BubbleType.sendBubble),
)
ChatBubble(
clipper: ChatBubbleClipper3(type: BubbleType.receiverBubble),
)
Properties of ChatBubbleClipper3 | Description |
---|
type | Values of clipper type BubbleType.sendBubble and BubbleType.receiverBubble |
radius | Radius of widget. Default value 15 |
nipSize | Size of nip. Default value 7 |
Example 4
ChatBubble(
clipper: ChatBubbleClipper4(type: BubbleType.sendBubble),
)
ChatBubble(
clipper: ChatBubbleClipper4(type: BubbleType.receiverBubble),
)
Properties of ChatBubbleClipper4 | Description |
---|
type | Values of clipper type BubbleType.sendBubble and BubbleType.receiverBubble |
radius | Radius of widget. Default value 5 |
nipSize | Size of nip. Default value 10 |
offset | Nip distance from bottom. Default value 7 |
Example 5
ChatBubble(
clipper: ChatBubbleClipper5(type: BubbleType.sendBubble),
)
ChatBubble(
clipper: ChatBubbleClipper5(type: BubbleType.receiverBubble),
)
Properties of ChatBubbleClipper5 | Description |
---|
type | Values of clipper type BubbleType.sendBubble and BubbleType.receiverBubble |
radius | Radius of widget. Default value 15 |
secondRadius | Second radius for bottom corner of widget. Default value 2 |
Example 6
ChatBubble(
clipper: ChatBubbleClipper6(type: BubbleType.sendBubble),
)
ChatBubble(
clipper: ChatBubbleClipper6(type: BubbleType.receiverBubble),
)
Properties of ChatBubbleClipper6 | Description |
---|
type | Values of clipper type BubbleType.sendBubble and BubbleType.receiverBubble |
radius | Radius of widget. Default value 10 |
nipSize | Size of nip. Default value 8 |
sizeRatio | Width ratio of nip. Default value 2 |
Example 7
ChatBubble(
clipper: ChatBubbleClipper7(type: BubbleType.sendBubble),
)
ChatBubble(
clipper: ChatBubbleClipper7(type: BubbleType.receiverBubble),
)
Properties of ChatBubbleClipper7 | Description |
---|
type | Values of clipper type BubbleType.sendBubble and BubbleType.receiverBubble |
radius | Radius of widget. Default value 25 |
Example 8
ChatBubble(
clipper: ChatBubbleClipper8(type: BubbleType.sendBubble),
)
ChatBubble(
clipper: ChatBubbleClipper8(type: BubbleType.receiverBubble),
)
Properties of ChatBubbleClipper8 | Description |
---|
type | Values of clipper type BubbleType.sendBubble and BubbleType.receiverBubble |
radius | Radius of widget. Default value 20 |
Example 9
ChatBubble(
clipper: ChatBubbleClipper9(type: BubbleType.sendBubble),
)
ChatBubble(
clipper: ChatBubbleClipper9(type: BubbleType.receiverBubble),
)
Properties of ChatBubbleClipper9 | Description |
---|
type | Values of clipper type BubbleType.sendBubble and BubbleType.receiverBubble |
radius | Radius of widget. Default value 15 |
nipSize | Size of nip. Default value 8 |
sizeRatio | Width ratio of nip. Default value 3 |
Example 10
ChatBubble(
clipper: ChatBubbleClipper10(type: BubbleType.sendBubble),
)
ChatBubble(
clipper: ChatBubbleClipper10(type: BubbleType.receiverBubble),
)
Properties of ChatBubbleClipper10 | Description |
---|
type | Values of clipper type BubbleType.sendBubble and BubbleType.receiverBubble |
radius | Radius of widget. Default value 15 |
nipSize | Size of nip. Default value 8 |
sizeRatio | Width ratio of nip. Default value 3 |