flutter_chat_bubble 1.0.2

Flutter Android iOS

Flutter widget for creating different types of chat bubble. You can use different properties of this Widget and create beautiful Chat Bubbles.

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.

PropertiesDescription
clipperDifferent Custom clipper valuesChatBubbleClipper1,ChatBubbleClipper2 to ChatBubbleClipper10
childChild of widget bubble
marginEmpty space to surround the decoration. All possible options
backGroundColorBackground color of widget
elevationElevation of widget
shadowColorShadow color of widget
alignmentAlign 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 ChatBubbleClipper1Description
typeValues of clipper type BubbleType.sendBubble and BubbleType.receiverBubble
radiusRadius of widget. Default value 10
nipHeightHeight of nip. Default value 10
nipWidthWidth of nip. Default value 15
nipRadiusRadius of nip. Default value 3

Example 2 #

ChatBubble(
    clipper: ChatBubbleClipper2(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper2(type: BubbleType.receiverBubble),
  )
Properties of ChatBubbleClipper2Description
typeValues of clipper type BubbleType.sendBubble and BubbleType.receiverBubble
radiusRadius of widget. Default value 10
nipHeightHeight of nip. Default value 10
nipWidthWidth of nip. Default value 15
nipRadiusRadius of nip. Default value 3

Example 3 #

ChatBubble(
    clipper: ChatBubbleClipper3(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper3(type: BubbleType.receiverBubble),
  )
Properties of ChatBubbleClipper3Description
typeValues of clipper type BubbleType.sendBubble and BubbleType.receiverBubble
radiusRadius of widget. Default value 15
nipSizeSize of nip. Default value 7

Example 4 #

ChatBubble(
    clipper: ChatBubbleClipper4(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper4(type: BubbleType.receiverBubble),
  )
Properties of ChatBubbleClipper4Description
typeValues of clipper type BubbleType.sendBubble and BubbleType.receiverBubble
radiusRadius of widget. Default value 5
nipSizeSize of nip. Default value 10
offsetNip distance from bottom. Default value 7

Example 5 #

ChatBubble(
    clipper: ChatBubbleClipper5(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper5(type: BubbleType.receiverBubble),
  )
Properties of ChatBubbleClipper5Description
typeValues of clipper type BubbleType.sendBubble and BubbleType.receiverBubble
radiusRadius of widget. Default value 15
secondRadiusSecond 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 ChatBubbleClipper6Description
typeValues of clipper type BubbleType.sendBubble and BubbleType.receiverBubble
radiusRadius of widget. Default value 10
nipSizeSize of nip. Default value 8
sizeRatioWidth ratio of nip. Default value 2

Example 7 #

ChatBubble(
    clipper: ChatBubbleClipper7(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper7(type: BubbleType.receiverBubble),
  )
Properties of ChatBubbleClipper7Description
typeValues of clipper type BubbleType.sendBubble and BubbleType.receiverBubble
radiusRadius of widget. Default value 25

Example 8 #

ChatBubble(
    clipper: ChatBubbleClipper8(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper8(type: BubbleType.receiverBubble),
  )
Properties of ChatBubbleClipper8Description
typeValues of clipper type BubbleType.sendBubble and BubbleType.receiverBubble
radiusRadius of widget. Default value 20

Example 9 #

ChatBubble(
    clipper: ChatBubbleClipper9(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper9(type: BubbleType.receiverBubble),
  )
Properties of ChatBubbleClipper9Description
typeValues of clipper type BubbleType.sendBubble and BubbleType.receiverBubble
radiusRadius of widget. Default value 15
nipSizeSize of nip. Default value 8
sizeRatioWidth ratio of nip. Default value 3

Example 10 #

ChatBubble(
    clipper: ChatBubbleClipper10(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper10(type: BubbleType.receiverBubble),
  )
Properties of ChatBubbleClipper10Description
typeValues of clipper type BubbleType.sendBubble and BubbleType.receiverBubble
radiusRadius of widget. Default value 15
nipSizeSize of nip. Default value 8
sizeRatioWidth ratio of nip. Default value 3
44
likes
100
pub points
87%
popularity

Flutter widget for creating different types of chat bubble. You can use different properties of this Widget and create beautiful Chat Bubbles.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

kinjal.dhamat.sa@gmail.com

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_chat_bubble