flutter_chat_bubble 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • new50

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

1.0.2 2020-05-25 #

  • Added New Example

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter_chat_bubble/bubble_type.dart';
import 'package:flutter_chat_bubble/chat_bubble.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_1.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_10.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_2.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_3.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_4.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_5.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_6.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_7.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_8.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_9.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text('Chat Bubble'),
        ),
        body: MainScreen(),
      ),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 20),
      child: ListView(
        children: <Widget>[
          getTitleText("Example 1"),
          getSenderView(
              ChatBubbleClipper1(type: BubbleType.sendBubble), context),
          getReceiverView(
              ChatBubbleClipper1(type: BubbleType.receiverBubble), context),
          SizedBox(
            height: 30,
          ),
          getTitleText("Example 2"),
          getSenderView(
              ChatBubbleClipper2(type: BubbleType.sendBubble), context),
          getReceiverView(
              ChatBubbleClipper2(type: BubbleType.receiverBubble), context),
          SizedBox(
            height: 30,
          ),
          getTitleText("Example 3"),
          getSenderView(
              ChatBubbleClipper3(type: BubbleType.sendBubble), context),
          getReceiverView(
              ChatBubbleClipper3(type: BubbleType.receiverBubble), context),
          SizedBox(
            height: 30,
          ),
          getTitleText("Example 4"),
          getSenderView(
              ChatBubbleClipper4(type: BubbleType.sendBubble), context),
          getReceiverView(
              ChatBubbleClipper4(type: BubbleType.receiverBubble), context),
          SizedBox(
            height: 30,
          ),
          getTitleText("Example 5"),
          getSenderView(
              ChatBubbleClipper5(type: BubbleType.sendBubble), context),
          getReceiverView(
              ChatBubbleClipper5(type: BubbleType.receiverBubble), context),
          SizedBox(
            height: 30,
          ),
          getTitleText("Example 6"),
          getSenderView(
              ChatBubbleClipper6(type: BubbleType.sendBubble), context),
          getReceiverView(
              ChatBubbleClipper6(type: BubbleType.receiverBubble), context),
          SizedBox(
            height: 30,
          ),
          getTitleText("Example 7"),
          getSenderView(
              ChatBubbleClipper7(type: BubbleType.sendBubble), context),
          getReceiverView(
              ChatBubbleClipper7(type: BubbleType.receiverBubble), context),
          SizedBox(
            height: 30,
          ),
          getTitleText("Example 8"),
          getSenderView(
              ChatBubbleClipper8(type: BubbleType.sendBubble), context),
          getReceiverView(
              ChatBubbleClipper8(type: BubbleType.receiverBubble), context),
          SizedBox(
            height: 30,
          ),
          getTitleText("Example 9"),
          getSenderView(
              ChatBubbleClipper9(type: BubbleType.sendBubble), context),
          getReceiverView(
              ChatBubbleClipper9(type: BubbleType.receiverBubble), context),
          SizedBox(
            height: 30,
          ),
          getTitleText("Example 10"),
          getSenderView(
              ChatBubbleClipper10(type: BubbleType.sendBubble), context),
          Padding(
            padding: EdgeInsets.only(bottom: 10),
            child: getReceiverView(
                ChatBubbleClipper10(type: BubbleType.receiverBubble), context),
          )
        ],
      ),
    );
  }

  getTitleText(String title) => Text(
        title,
        style: TextStyle(
          color: Colors.black,
          fontSize: 20,
        ),
      );

  getSenderView(CustomClipper clipper, BuildContext context) => ChatBubble(
        clipper: clipper,
        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),
          ),
        ),
      );

  getReceiverView(CustomClipper clipper, BuildContext context) => ChatBubble(
        clipper: clipper,
        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),
          ),
        ),
      );
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_chat_bubble: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_chat_bubble/bubble_type.dart';
import 'package:flutter_chat_bubble/chat_bubble.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_1.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_10.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_2.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_3.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_4.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_5.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_6.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_7.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_8.dart';
import 'package:flutter_chat_bubble/clippers/chat_bubble_clipper_9.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
50
Learn more about scoring.

We analyzed this package on May 25, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.1
  • pana: 0.13.8-dev
  • Flutter: 1.17.0

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test