chat_bubbles plugin

Flutter chat bubble widgets, similar to the Whatsapp and more shapes. Easy to use and implement chat bubbles.

Getting Started

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

dependencies:
  chat_bubbles: ^1.0.0+3

Usage

Then you just have to import the package with

import 'package:chat_bubbles/chat_bubbles.dart'

Now you can use this plugin to implement various types of Chat Bubbles and Date chips.

Example

Single bubble example

  BubbleSpecialOne(
    text: 'Hi, How are you? ',
    isSender: false,
    color: Colors.purple.shade100,
    textStyle: TextStyle(
      fontSize: 20,
      color: Colors.purple,
      fontStyle: FontStyle.italic,
      fontWeight: FontWeight.bold,
    ),
  ),

Date Chip example

  DateChip(
    date: new DateTime(2021, 5, 7),
    color: Color(0x558AD3D5),
  ),

Main example (Chat View)

   final now = new DateTime.now();
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: SingleChildScrollView(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             BubbleNormal(
               text: 'bubble normal with tail',
               isSender: false,
               color: Color(0xFF1B97F3),
               tail: true,
               textStyle: TextStyle(
                 fontSize: 20,
                 color: Colors.white,
               ),
             ),
             BubbleNormal(
               text: 'bubble normal with tail',
               isSender: true,
               color: Color(0xFFE8E8EE),
               tail: true,
               sent: true,
             ),
             DateChip(
               date: new DateTime(now.year, now.month, now.day - 2),
             ),
             BubbleNormal(
               text: 'bubble normal without tail',
               isSender: false,
               color: Color(0xFF1B97F3),
               tail: false,
               textStyle: TextStyle(
                 fontSize: 20,
                 color: Colors.white,
               ),
             ),
             BubbleNormal(
               text: 'bubble normal without tail',
               color: Color(0xFFE8E8EE),
               tail: false,
               sent: true,
               seen: true,
               delivered: true,
             ),
             BubbleSpecialOne(
               text: 'bubble special one with tail',
               isSender: false,
               color: Color(0xFF1B97F3),
               textStyle: TextStyle(
                 fontSize: 20,
                 color: Colors.white,
               ),
             ),
             DateChip(
               date: new DateTime(now.year, now.month, now.day - 1),
             ),
             BubbleSpecialOne(
               text: 'bubble special one with tail',
               color: Color(0xFFE8E8EE),
               seen: true,
             ),
             BubbleSpecialOne(
               text: 'bubble special one without tail',
               isSender: false,
               tail: false,
               color: Color(0xFF1B97F3),
               textStyle: TextStyle(
                 fontSize: 20,
                 color: Colors.black,
               ),
             ),
             BubbleSpecialOne(
               text: 'bubble special one without tail',
               tail: false,
               color: Color(0xFFE8E8EE),
               sent: true,
             ),
             BubbleSpecialTwo(
               text: 'bubble special tow with tail',
               isSender: false,
               color: Color(0xFF1B97F3),
               textStyle: TextStyle(
                 fontSize: 20,
                 color: Colors.black,
               ),
             ),
             DateChip(
               date: now,
             ),
             BubbleSpecialTwo(
               text: 'bubble special tow with tail',
               isSender: true,
               color: Color(0xFFE8E8EE),
               sent: true,
             ),
             BubbleSpecialTwo(
               text: 'bubble special tow without tail',
               isSender: false,
               tail: false,
               color: Color(0xFF1B97F3),
               textStyle: TextStyle(
                 fontSize: 20,
                 color: Colors.black,
               ),
             ),
             BubbleSpecialTwo(
               text: 'bubble special tow without tail',
               tail: false,
               color: Color(0xFFE8E8EE),
               delivered: true,
             ),
           ],
         ),
       ),
     ),
   );