Flutter chat bubble/speech bubble widgets.

Overview

chat_bubbles plugin

Pub Version likes popularity pub points GitHub GitHub forks GitHub Repo stars GitHub last commit

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

Getting Started

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

dependencies:
  chat_bubbles: ^1.1.0

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, Audio 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,
    ),
  ),

Audio chat bubble example

  Duration duration = new Duration();
  Duration position = new Duration();
  bool isPlaying = false;
  bool isLoading = false;
  bool isPause = false;

  BubbleNormalAudio(
    color: Color(0xFFE8E8EE),
    duration: duration.inSeconds.toDouble(),
    position: position.inSeconds.toDouble(),
    isPlaying: isPlaying,
    isLoading: isLoading,
    isPause: isPause,
    onSeekChanged: _changeSeek,
    onPlayPauseButtonClick: _playAudio,
    sent: true,
  ),

Date Chip example

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

Main example (Chat View)

Checkout the plugin example to figure out more.

  Duration duration = new Duration();
  Duration position = new Duration();
  bool isPlaying = false;
  bool isLoading = false;
  bool isPause = false;

  @override
  Widget build(BuildContext context) {
    final now = new DateTime.now();
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              BubbleNormalAudio(
                color: Color(0xFFE8E8EE),
                duration: duration.inSeconds.toDouble(),
                position: position.inSeconds.toDouble(),
                isPlaying: isPlaying,
                isLoading: isLoading,
                isPause: isPause,
                onSeekChanged: _changeSeek,
                onPlayPauseButtonClick: _playAudio,
                sent: true,
              ),
              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,
              ),
            ],
          ),
        ),
      ),
    );
  }

Issues

Please feel free to let me know any issue regarding to this plugin.

You might also like...

Flutter chat app

labalaba A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Dec 16, 2022

:rocket: This application using flutter for develop a realtime chat app

:rocket: This application using flutter for develop a realtime chat app

Flutter Chat Socket Description: 🚀 This application using Flutter for develop a realtime chat app How I can run it? 🚀 Clone this repository 🚀 Run b

Dec 31, 2022

A sophisticated Chat Application [NestJs+Flutter].

A sophisticated Chat Application [NestJs+Flutter].

Hornbill Key features Used sockets for messaging and loading registered contacts Sqflite to store chats on device Repository pattern Tech Stack [Flutt

Dec 26, 2022

Flutter chat-app UI with multiple themes & light + Dark mode.

Flutter chat-app UI with multiple themes & light + Dark mode.

Chat-App UI If you liked it, please give it a star . Features of the app - Light Mode + Dark Mode 4 different color themes - pink/teal/yellow/purple I

Oct 5, 2022

Berikut merupakan source code Chat Apps dengan Flutter + GetX + Firebase

chatapp A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Dec 31, 2022

Flutter Chat app using MQTT.

 Flutter Chat app using MQTT.

A Chat app developed with Flutter, it uses MQTT protocol

Nov 11, 2022

Third Flutter Project to practice. A chat app, which uses Firebase as auth and database service.

Third Flutter Project to practice. A chat app, which uses Firebase as auth and database service.

chat_app Third Flutter Project to practice. A chat app, which uses Firebase as auth and database service. Resource video 0.1 Sign In and Register page

Oct 4, 2021

A simple chat app UI using flutter SDK project.

A simple chat app UI using flutter SDK project.

Chatty App A simple chat app UI using flutter SDK project. Screenshot Getting Started This project is a starting point for a Flutter application. A fe

Jul 15, 2022

Chatify Flutter & Firebase Powered Chat Application

 Chatify Flutter & Firebase Powered Chat Application

Chatify Flutter Application Chatify Flutter & Firebase Powered Chat Application Flutter Flutter allows you to build beautiful native apps on iOS and A

Oct 18, 2022
Comments
  • TextController value is lost on state change

    TextController value is lost on state change

    Hi, i found the following issues while using plugin. The value / state of keyboard entry is lost when any of the following event is fired. (keyboard close, keyboard mode toggle).

    This is as a result of using a "Stateless" widget on the "MessageBar" class. I had to convert the class to "Stateful" widget to override this behaviour.

    [ message_bar.dart ]

    import 'package:flutter/material.dart';

    ///Normal Message bar with more actions /// /// following attributes can be modified /// /// /// # BOOLEANS /// [replying] is additional reply widget top of the message bar /// /// # STRINGS /// [replyingTo] is a string to tag the replying message /// /// # WIDGETS /// [actions] are the additional leading action buttons like camera /// and file select /// /// # COLORS /// [replyWidgetColor] is reply widget color /// [replyIconColor] is the reply icon color on the left side of reply widget /// [replyCloseColor] is the close icon color on the right side of the reply /// widget /// [messageBarColor] is the color of the message bar /// [sendButtonColor] is the color of the send button /// /// # METHODS /// [onTextChanged] is function which triggers after text every text change /// [onSend] is send button action /// [onTapCloseReply] is close button action of the close button on the /// reply widget usually change [replying] attribute to false

    class MessageBar extends StatefulWidget { final bool replying; final String replyingTo; final List actions; final Color replyWidgetColor; final Color replyIconColor; final Color replyCloseColor; final Color messageBarColor; final Color sendButtonColor; final void Function(String)? onTextChanged; final void Function(String)? onSend; final void Function()? onTapCloseReply;

    /// [MessageBar] constructor /// /// MessageBar({ this.replying = false, this.replyingTo = "", this.actions = const [], this.replyWidgetColor = const Color(0xffF4F4F5), this.replyIconColor = Colors.blue, this.replyCloseColor = Colors.black12, this.messageBarColor = const Color(0xffF4F4F5), this.sendButtonColor = Colors.blue, this.onTextChanged, this.onSend, this.onTapCloseReply, });

    @override State createState() => _MessageBarState(); }

    class _MessageBarState extends State { final TextEditingController _textController = TextEditingController(); /// [MessageBar] builder method /// @override Widget build(BuildContext context) { return Align( alignment: Alignment.bottomCenter, child: Container( child: Column( mainAxisAlignment: MainAxisAlignment.end, children: [ widget.replying ? Container( color: widget.replyWidgetColor, padding: const EdgeInsets.symmetric( vertical: 8, horizontal: 16, ), child: Row( children: [ Icon( Icons.reply, color: widget.replyIconColor, size: 24, ), Expanded( child: Container( child: Text( 'Re : ' + widget.replyingTo, overflow: TextOverflow.ellipsis, ), ), ), InkWell( onTap: widget.onTapCloseReply, child: Icon( Icons.close, color: widget.replyCloseColor, size: 24, ), ), ], )) : Container(), widget.replying ? Container( height: 1, color: Colors.grey.shade300, ) : Container(), Container( color: widget.messageBarColor, padding: const EdgeInsets.symmetric( vertical: 8, horizontal: 16, ), child: Row( children: [ ...widget.actions, Expanded( child: Container( child: TextField( controller: _textController, keyboardType: TextInputType.multiline, textCapitalization: TextCapitalization.sentences, minLines: 1, maxLines: 3, onChanged: widget.onTextChanged, decoration: InputDecoration( hintText: "Type your message here", hintMaxLines: 1, contentPadding: const EdgeInsets.symmetric( horizontal: 8.0, vertical: 10), hintStyle: TextStyle( fontSize: 16, ), fillColor: Colors.white, filled: true, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(30.0), borderSide: const BorderSide( color: Colors.white, width: 0.2, ), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(30.0), borderSide: const BorderSide( color: Colors.black26, width: 0.2, ), ), ), ), ), ), Padding( padding: const EdgeInsets.only(left: 16), child: InkWell( child: Icon( Icons.send, color: widget.sendButtonColor, size: 24, ), onTap: () { if (_textController.text.trim() != '') { if (widget.onSend != null) { widget.onSend!(_textController.text.trim()); } _textController.text = ''; } }, ), ), ], ), ), ], ), ), ); } }

    opened by Samleet 1
  • how to implement emoji as an action button

    how to implement emoji as an action button

    Thanks for this wonderful plugin. I would like to add emoji add button to MessageBar like above. But I could not figure out how to implement this. Is it possible to add as an InkWell object? How should I proceed? Thanks.

          actions: [
            InkWell(
              child: Icon(
                Icons.emoji,
                color: Colors.black,
                size: 24,
              ),
              onTap: () => openEmojis(),
            ),
          ]
    
    opened by cool2apps 1
  • Color option for sent, delivered, and seen icons

    Color option for sent, delivered, and seen icons

    I just made some little changes to give user the option to change the color for icons of sent, delivered and seen based on their background color of the bubble.

    opened by jabirmayar 0
Releases(v1.4.0)
Owner
Prabhanu Gunaweera
Computer science and engineering undergraduate at university of Moratuwa.
Prabhanu Gunaweera
A Translator App Which is Build using Flutter, Speech To Text, Google ML Kit, Google Translator and Text To Speech.

AI Translator This is a Translator App Which is Build using Flutter, Speech To Text, Google ML Kit, Google Translator and Text To Speech. Download App

null 4 Jul 16, 2022
It is a simple group chat application made with flutter back-end by Firebase. People can chat like a community chat.

flash_chat A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

Moideen Rafih P A 4 Aug 7, 2022
A powerful Flutter chat UI component library and business logic for Tencent Cloud Chat, creating seamless in-app chat modules for delightful user experiences.

<style> .button-9 { appearance: button; backface-visibility: hidden; background-color: #1d52d9; border-radius: 6px; border-width: 0; box-shadow: rgba(

Tencent Cloud 63 Aug 11, 2023
Sytôdy, a Flutter "speech to text" todo app POC

Sytôdy, a Flutter "speech to text" todo app POC ⚠️ iOS10(Swift) & Android Usage Install flutter cd sytody flutter run ?? Video demo How it works TL;DR

Erick Ghaumez 83 Jan 19, 2022
The most complete Chat UI for flutter highly customizable and helps developing chat UI faster.

⚠️ Dashchat v2 is available in v2 branch ⚠️ You can open issues for the v2 to indicate things we need to implement/fix. Also the API can change until

Fayeed Pawaskar 432 Dec 11, 2022
Chat-application - Build Chat Application using Flutter and Firebase

Build Chat Application using Flutter & Firebase Source Code - Enjoy ! Social Med

Muhammad Irvan 0 Jan 3, 2022
Chat-App - A Chat App with flutter and Firebase and Video Calling using WebRTC

chat_app A chat app with flutter and firebase with image message support and vid

Reza Hosseinypour 10 Nov 23, 2022
Amir Khan 47 Jan 8, 2023
A full-fledged one-to-one chat app developed entirely in Flutter

Enigma Enigma - A minimalist, locked-down one-to-one chat app. Usage Flutter - Get Started Since this is a Firebase dependent project, create a Fireba

Amit Joki 389 Dec 23, 2022
chat app with flutter

Chat App Reader Ui Made with Flutter ?? you can also buy me coffee ?? Requirements ?? Any Operating System (MacOS, Linux, Windows) Any IDE with Flutte

Dami 22 Apr 23, 2022