Git Product home page Git Product logo

flutterchatbubble's Introduction

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
padding Empty space between its content and its border. 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.