vi-k / bubble

Speech bubble for Flutter

Bubble

A Flutter widget for chat like a speech bubble in Whatsapp and others.

Example

See sources.

Usage

Bubble(
  child: Text('Hello, World!'),
),

• color

Bubble(
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TODAY', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  child: Text('Hi, developer!'),
),

• nip

Bubble(
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TODAY', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.rightBottom,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.leftBottom,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.no,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TOMORROW', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),

• stick

If stick set to false the right offset of bubble equal to the offset from the left, not taking into account the size of the nip. This allows the bubbles to line up. If stick set to true, the far side will be stick to the edge.

Bubble(
  stick: true,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TODAY', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  stick: true,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  stick: true,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  stick: true,
  nip: BubbleNip.rightBottom,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  stick: true,
  nip: BubbleNip.leftBottom,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  stick: true,
  nip: BubbleNip.no,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TOMORROW', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),

• alignment

Bubble(
  alignment: Alignment.center,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TODAY', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightBottom,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftBottom,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.center,
  nip: BubbleNip.no,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TOMORROW', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),

• nipWidth and nipHeight

Bubble(
  alignment: Alignment.center,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TODAY', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topRight,
  nipWidth: 8,
  nipHeight: 24,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topLeft,
  nipWidth: 8,
  nipHeight: 24,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topRight,
  nipWidth: 30,
  nipHeight: 10,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topLeft,
  nipWidth: 30,
  nipHeight: 10,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.center,
  nip: BubbleNip.no,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TOMORROW', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),

• radius

Bubble(
  alignment: Alignment.center,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TODAY', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  radius: Radius.zero,
  alignment: Alignment.topRight,
  nipWidth: 8,
  nipHeight: 24,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  radius: Radius.zero,
  alignment: Alignment.topLeft,
  nipWidth: 8,
  nipHeight: 24,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  radius: Radius.elliptical(5.0, 10.0),
  alignment: Alignment.topRight,
  nipWidth: 30,
  nipHeight: 10,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  radius: Radius.elliptical(5.0, 10.0),
  alignment: Alignment.topLeft,
  nipWidth: 30,
  nipHeight: 10,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  radius: Radius.circular(20.0),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  radius: Radius.circular(20.0),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.center,
  nip: BubbleNip.no,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TOMORROW', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),

• nipRadius

for (var i = 0; i <= 5; i++)
  Bubble(
    margin: BubbleEdges.only(top: 10),
    nipRadius: i.toDouble(),
    alignment: Alignment.topRight,
    nipWidth: 30,
    nipHeight: 10,
    nip: BubbleNip.rightTop,
    color: Color.fromRGBO(225, 255, 199, 1.0),
    child: Text('Hello, World!', textAlign: TextAlign.right),
  ),
for (var i = 0; i <= 5; i++)
  Bubble(
    margin: BubbleEdges.only(top: 10),
    nipRadius: i.toDouble(),
    alignment: Alignment.topLeft,
    nipWidth: 30,
    nipHeight: 10,
    nip: BubbleNip.leftTop,
    child: Text('Hi, developer!'),
  ),

Scheme:

• nipOffset

for (var i = 0; i <= 15; i += 3)
  Bubble(
    margin: BubbleEdges.only(top: 10),
    nipOffset: i.toDouble(),
    alignment: Alignment.topRight,
    nipWidth: 30,
    nipHeight: 10,
    nip: BubbleNip.rightTop,
    color: Color.fromRGBO(225, 255, 199, 1.0),
    child: Text('Hello, World!', textAlign: TextAlign.right),
  ),
for (var i = 0; i <= 15; i += 3)
  Bubble(
    margin: BubbleEdges.only(top: 10),
    nipOffset: i.toDouble(),
    alignment: Alignment.topLeft,
    nipWidth: 30,
    nipHeight: 10,
    nip: BubbleNip.leftTop,
    child: Text('Hi, developer!'),
  ),

• margin

Bubble(
  alignment: Alignment.center,
  color: const Color.fromRGBO(212, 234, 244, 1),
  child: const Text('TODAY',
      textAlign: TextAlign.center,
      style: TextStyle(fontSize: 11)),
),
Bubble(
  margin: const BubbleEdges.only(top: 10),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: const Color.fromRGBO(225, 255, 199, 1),
  child: const Text('Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: const BubbleEdges.only(top: 2),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  showNip: false,
  color: const Color.fromRGBO(225, 255, 199, 1),
  child: const Text('How are you?', textAlign: TextAlign.right),
),
Bubble(
  margin: const BubbleEdges.only(top: 10),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: const Text('Hi, developer!'),
),
Bubble(
  margin: const BubbleEdges.only(top: 2),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  showNip: false,
  child: const Text('Well, see for yourself'),
),

Bubble(
  alignment: Alignment.center,
  color: Color.fromRGBO(212, 234, 244, 1.0),
  child: Text('TODAY', textAlign: TextAlign.center, style: TextStyle(fontSize: 11.0)),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World! Hello, World! Hello, World! Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer! Hi, developer! Hi, developer! Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10, left: 40),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Text('Hello, World! Hello, World! Hello, World! Hello, World!', textAlign: TextAlign.right),
),
Bubble(
  margin: BubbleEdges.only(top: 10, right: 40),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer! Hi, developer! Hi, developer! Hi, developer!'),
),

• elevation

A thick shadow.

for (var i = 1; i <= 8; i *= 2)
  Column(
    children: <Widget>[
      Bubble(
        margin: BubbleEdges.only(top: 10),
        elevation: i.toDouble(),
        alignment: Alignment.topRight,
        nip: BubbleNip.rightTop,
        color: Color.fromARGB(255, 225, 255, 199),
        child: Text('Hello, World!'),
      ),
      Bubble(
        margin: BubbleEdges.only(top: 10),
        elevation: i.toDouble(),
        alignment: Alignment.topLeft,
        nip: BubbleNip.leftTop,
        child: Text('Hi, developer!'),
      ),
    ],
  ),

A thin shadow.

double px = 1 / MediaQuery.of(context).devicePixelRatio;

...

Bubble(
  elevation: 0,
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, World!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  elevation: 0.5 * px,
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, World!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  elevation: 1 * px,
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, World!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  elevation: 1,
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, World!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  elevation: 0,
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  elevation: 0.5 * px,
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  elevation: 1 * px,
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  elevation: 1,
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),

• shadowColor

Bubble(
  shadowColor: Colors.red,
  elevation: 2,
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, World!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  shadowColor: Colors.green,
  elevation: 2,
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, World!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  shadowColor: Colors.blue,
  elevation: 2,
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, World!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  shadowColor: Colors.red,
  elevation: 2,
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  shadowColor: Colors.green,
  elevation: 2,
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  shadowColor: Colors.blue,
  elevation: 2,
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),

• padding

Bubble(
  padding: BubbleEdges.all(2),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, World!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  padding: BubbleEdges.all(2),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  padding: BubbleEdges.all(20),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, World!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  padding: BubbleEdges.all(20),
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  child: Text('Hi, developer!'),
),

bubble's Issues

[feat] Add onTap & onLongPress callback

Looks great to implement onTap & onLongPress to handle click action.

For example:

Bubble(
  onTap: () {
    print('Hello from onTap');
  },
  onLongPress: () {
    print('Hello from onLongPress');
  },
  // .. other properties
),

OverFlowed Bright problem

When i use this package in Row and write some words code is giving an error overflowed.How to solve this problem?

Support rich text

Do you plan to add richtext ?

This would be a JSON format that can write text with

Add reaction support

Hi. first of all thanks for the good work.
It will be great if bubble support the reaction feature. an emoji located at the bottom of the message like telegram.
Thanks

Layout in iOS is invalid ?

Hi,

i'm face this issue, when use install from app store, it's show large grey block.
is there anything i doing worng?

-> simulator , UI is good
-> plug-in device install , UI is good
-> archive and release to app Store, UI is wrong.

Anyone help, please?

[✓] Flutter (Channel master, v1.15.4-pre.139, on Mac OS X 10.14.6 18G87, locale zh-Hant-TW)
• Flutter version 1.15.4-pre.139 at /Users/jason/flutter
• Framework revision 4df8fdb7df (2 days ago), 2020-02-22 18:24:03 -0800
• Engine revision f2f8c342be
• Dart version 2.8.0 (build 2.8.0-dev.9.0 0f141be8bd)

    Flexible( 
          child: InkWell(
              onTap: () => messageClickEvent(msg),
              onLongPress: () => _showMessageMenu(context, index),
              child: RoomMgr.instance().isMessageSticker(msg) ||
                      RoomMgr.instance().isMessagePhoto(msg) ||
                      RoomMgr.instance().isMessageLocalPhoto(msg)
                  ? Container(
                      padding: EdgeInsets.fromLTRB(4, 4, 4, 4),
                      constraints: BoxConstraints(maxWidth: 200),
                      child: getGraphicMessageWidget(msg))
                  : Bubble(
                      margin: BubbleEdges.only(top: 10),
                      nip: BubbleNip.rightBottom,
                      color: Color.fromRGBO(225, 255, 199, 1.0),
                      child: Text('${msg.content}', textAlign: TextAlign.left),
                    )),
        )

flutter doctor -v

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/jason/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 28.0.3
    • ANDROID_HOME = /Users/jason/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3.1, Build version 11C504
    • CocoaPods version 1.8.4

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 43.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.42.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.8.1

[✓] Connected device (4 available)
    • iPhone 11 Pro Max • 1CF9A7D0-45B9-455F-BC83-4B722F8247D3 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)
    • macOS             • macOS                                • darwin-x64     • Mac OS X 10.14.6 18G87
    • Chrome            • chrome                               • web-javascript • Google Chrome 80.0.3987.122
    • Web Server        • web-server                           • web-javascript • Flutter Tools

• No issues found!

Normal UI

After submit app store

Dynamic list of bubbles

Hello,

I have the following code to implement a dynamic list of chat bubbles. The issue is that in the setState the bubbles are not redrawn. Could you please provide an example of dynamically generating bubbles.

Also, how do I autoscroll to the bottom that new bubbles are added?

Thank you.

List<Widget> bubbles = <Widget>[];

void onSomeEvent() {
    setState(() {
        bubbles.add(new Bubble(color: Colors.blue, child: new Text('Hello Bubble');
    }
}

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Quantum AI Scribe"),
      ),
      body: Container(
        color: Colors.black12,
        child: ListView(
          padding: const EdgeInsets.all(8),
          children: bubbles,
        ),
      )
    );
 }

UnimplementedError on web with --web-renderer html

I get UnimplementedError with the following stack trace when trying to show a bubble with HTML renderer for Flutter web:

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 251:49  throw_
lib/ui/src/ui/path.dart 72:5                                                  combine
packages/bubble/bubble_clipper.dart 195:23                                    getClip
packages/bubble/bubble_painter.dart 35:26                                     paint
packages/flutter/src/rendering/custom_paint.dart 563:12                       [_paintWithPainter]
packages/flutter/src/rendering/custom_paint.dart 605:7                        paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/shifted_box.dart 79:14                         paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/shifted_box.dart 79:14                         paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/shifted_box.dart 79:14                         paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/shifted_box.dart 79:14                         paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 398:12                             pushLayer
packages/visibility_detector/src/render_visibility_detector.dart 64:12        paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 141:10                             _repaintCompositedChild
packages/flutter/src/rendering/object.dart 100:5                              repaintCompositedChild
packages/flutter/src/rendering/object.dart 206:7                              [_compositeChild]
packages/flutter/src/rendering/object.dart 187:7                              paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/sliver_multi_box_adaptor.dart 647:16           paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/sliver_padding.dart 274:14                     paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/viewport.dart 660:16                           [_paintContents]
packages/flutter/src/rendering/object.dart 398:12                             pushLayer
packages/flutter/src/rendering/object.dart 454:7                              pushClipRect
packages/flutter/src/rendering/viewport.dart 635:37                           paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 141:10                             _repaintCompositedChild
packages/flutter/src/rendering/object.dart 100:5                              repaintCompositedChild
packages/flutter/src/rendering/object.dart 206:7                              [_compositeChild]
packages/flutter/src/rendering/object.dart 187:7                              paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 141:10                             _repaintCompositedChild
packages/flutter/src/rendering/object.dart 100:5                              repaintCompositedChild
packages/flutter/src/rendering/object.dart 206:7                              [_compositeChild]
packages/flutter/src/rendering/object.dart 187:7                              paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/custom_paint.dart 608:11                       paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 141:10                             _repaintCompositedChild
packages/flutter/src/rendering/object.dart 100:5                              repaintCompositedChild
packages/flutter/src/rendering/object.dart 206:7                              [_compositeChild]
packages/flutter/src/rendering/object.dart 187:7                              paintChild
packages/flutter/src/rendering/box.dart 2794:14                               defaultPaint
packages/flutter/src/rendering/stack.dart 629:5                               paintStack
packages/flutter/src/rendering/stack.dart 645:7                               paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/box.dart 2794:14                               defaultPaint
packages/flutter/src/rendering/flex.dart 1078:7                               paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/box.dart 2794:14                               defaultPaint
packages/flutter/src/rendering/stack.dart 629:5                               paintStack
packages/flutter/src/rendering/stack.dart 645:7                               paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/box.dart 2794:14                               defaultPaint
packages/flutter/src/rendering/flex.dart 1078:7                               paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/stack.dart 744:12                              paintStack
packages/flutter/src/rendering/stack.dart 645:7                               paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/box.dart 2794:14                               defaultPaint
packages/flutter/src/rendering/flex.dart 1078:7                               paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/stack.dart 744:12                              paintStack
packages/flutter/src/rendering/stack.dart 645:7                               paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/box.dart 2794:14                               defaultPaint
packages/flutter/src/rendering/custom_layout.dart 409:5                       paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/material/material.dart 553:11                            paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 398:12                             pushLayer
packages/flutter/src/rendering/proxy_box.dart 1941:14                         paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/shifted_box.dart 79:14                         paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 189:12                             paintChild
packages/flutter/src/rendering/proxy_box.dart 140:14                          paint
packages/flutter/src/rendering/object.dart 2409:7                             [_paintWithContext]
packages/flutter/src/rendering/object.dart 141:10                             _repaintCompositedChild
packages/flutter/src/rendering/object.dart 100:5                              repaintCompositedChild
packages/flutter/src/rendering/object.dart 979:29                             flushPaint
packages/flutter/src/rendering/binding.dart 455:19                            drawFrame
packages/flutter/src/widgets/binding.dart 883:13                              drawFrame
packages/flutter/src/rendering/binding.dart 319:5                             [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1143:15                           [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1080:9                            handleDrawFrame
packages/flutter/src/scheduler/binding.dart 996:5                             [_handleDrawFrame]
lib/_engine/engine/platform_dispatcher.dart 1003:13                           invoke
lib/_engine/engine/platform_dispatcher.dart 157:5                             invokeOnDrawFrame
lib/_engine/engine.dart 440:45                                                <fn>

I tested for BubbleNip.leftBottom. What's breaking is

path = Path.combine(PathOperation.union, path, path2);

This is a Flutter issue: flutter/flutter#44572
It is there for nearly two years, dropped out of many milestones and currently has none.

What could be done here is either:

1. To create paths without combining.
2. Or at least to mention the CanvasKit requirement in README.

Alignment Nip

Would it be possible to have a Nip in the center of the bubble? Top and bottom?

Hey,Add the avartar or chip at side of the nip pls.

can anyone add avartar or chip widget???

flutter web crash

Works until I scroll, then I get this:

Exception has occurred.
"Error: Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/surface/clip.dart:295:12
clipElement == null
is not true
at Object.throw [as throw] (http://localhost:35885/dart_sdk.js:4324:11)
at Object.assertFailed (http://localhost:35885/dart_sdk.js:4271:15)
at _engine.PersistedPhysicalShape.new.[_applyShape] (http://localhost:35885/dart_sdk.js:152323:47)
at _engine.PersistedPhysicalShape.new.update (http://localhost:35885/dart_sdk.js:152362:26)
at _engine.PersistedOffset.new.[_updateManyToMany] (http://localhost:35885/dart_sdk.js:151083:22)
at _engine.PersistedOffset.new.update (http://localhost:35885/dart_sdk.js:150918:32)
at _engine.PersistedOffset.new.update (http://localhost:35885/dart_sdk.js:152749:13)
at _engine.PersistedClipRect.new.[_updateManyToMany] (http://localhost:35885/dart_sdk.js:151083:22)
at _engine.PersistedClipRect.new.update (http://localhost:35885/dart_sdk.js:150918:32)
at _engine.PersistedClipRect.new.update (http://localhost:35885/dart_sdk.js:152040:13)
at _engine.PersistedOffset.new.[_updateManyToOne] (http://localhost:35885/dart_sdk.js:151035:18)
at _engine.PersistedOffset.new.update (http://localhost:35885/dart_sdk.js:150914:31)
at _engine.PersistedOffset.new.update (http://localhost:35885/dart_sdk.js:152749:13)
at _engine.PersistedTransform.new.[_updateManyToMany] (http://localhost:35885/dart_sdk.js:151075:20)
at _engine.PersistedTransform.new.update (http://localhost:35885/dart_sdk.js:150918:32)
at _engine.PersistedTransform.new.update (http://localhost:35885/dart_sdk.js:163555:13)
at _engine.PersistedPhysicalShape.new.[_updateManyToMany] (http://localhost:35885/dart_sdk.js:151075:20)
at _engine.PersistedPhysicalShape.new.update (http://localhost:35885/dart_sdk.js:150918:32)
at _engine.PersistedPhysicalShape.new.update (http://localhost:35885/dart_sdk.js:152350:13)
at _engine.PersistedOffset.new.[_updateManyToOne] (http://localhost:35885/dart_sdk.js:151013:18)
at _engine.PersistedOffset.new.update (http://localhost:35885/dart_sdk.js:150914:31)
at _engine.PersistedOffset.new.update (http://localhost:35885/dart_sdk.js:152749:13)
at _engine.PersistedOffset.new.[_updateManyToOne] (http://localhost:35885/dart_sdk.js:151013:18)
at _engine.PersistedOffset.new.update (http://localhost:35885/dart_sdk.js:150914:31)
at _engine.PersistedOffset.new.update (http://localhost:35885/dart_sdk.js:152749:13)
at _engine.PersistedTransform.new.[_updateManyToOne] (http://localhost:35885/dart_sdk.js:151013:18)
at _engine.PersistedTransform.new.update (http://localhost:35885/dart_sdk.js:150914:31)
at _engine.PersistedTransform.new.update (http://localhost:35885/dart_sdk.js:163555:13)
at _engine.PersistedScene.new.[_updateManyToOne] (http://localhost:35885/dart_sdk.js:151013:18)
at _engine.PersistedScene.new.update (http://localhost:35885/dart_sdk.js:150914:31)
at http://localhost:35885/dart_sdk.js:163301:33

Change to AlignmentGeometry instead of Alignment

For using with RTL languages (AlignmentDirectional)

https://api.flutter.dev/flutter/painting/AlignmentDirectional-class.html

center nip features

Does it have some position?
like BubbleNip.leftCenter

Clip behavior not work because of BubblePainter in v1.2.1

Bubble won't clip the child widget in v1.2.1，but it works inv1.1.9+1.
Because in v1.2.1 it uses BubblePainter to wrap a child widget which won‘t clip the child widget，
while in v1.1.9+1 it uses PhysicalShape which will do clip work.

Nip draw in wrong position

i am using the following code to add bubbles to the screen:

class ChatMessageWidget extends StatelessWidget {
final bool self;
final String text;
final AnimationController animationController;

ChatMessageWidget({this.text,this.animationController,this.self});

TextStyle _msgStyle = TextStyle(
color: Palette.blackColor,
fontSize: 15,
fontFamily: "Lato",
fontWeight: FontWeight.w500,
);

@OverRide
Widget build(BuildContext context) {
print("Message widget build self = $self $text");
return SizeTransition(
sizeFactor: CurvedAnimation(
parent: animationController,
curve: Curves.easeOut
),
axisAlignment: 0.0,
child: Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: Row(
mainAxisAlignment: self == true ? MainAxisAlignment.start : MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Bubble(
color: self == true ? Colors.white : Color.fromRGBO(225, 255, 199, 1.0),
//margin: BubbleEdges.only(top: 5),
nip: self == true ? BubbleNip.leftTop : BubbleNip.rightTop,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(top: 5.0),
child: Text(text,style: _msgStyle,),
),
],
),
),
],
),
),
);
}
}

after adding new message the nips are getting drawn in the wrong position, however the position and color are correct (please see screen shots), if i drag the bubbles out of the screen (so they need to get redrow) the nip is in the correct position

Feature request: Date and/or Time

Hi any chance that you can add a field where i can provide the Date or/and Time....
i tried to insert a Column Widget with a second row, but positioning and styling looks pretty ugly

best regards
harald

Add icon to end of Bubble widget

I want to add an indicator icon to the end of bubble widget for users to know if their message has been sent, is Pending or read just like what's app. There seems to be no provision for this. Any help?

How to show html tag

Hi admin,

I have a string html:
<img src="https://www.w3schools.com/howto/img_avatar.png">

I want the image to display in a moderate size, not width 100%.

Bubble with nip not showed with Flutter Web

Bubble with nip are not showed in Flutter Web.

Triangle Nip

can i have the nip as a even triangle? please

bottom center bubble

like this

Add custom key

Hi! I'm using GetX with a ListView.builder to add a list of bubble messages in realtime. However, when Getx rebuild ListView, some "Bubble's widget" are not refreshing and lose its nip (it changes nip direction). However, I did a temporal fix adding a UniqueKey() on a parent container, just like this:

return Container(
      key: UniqueKey(),
      child: Bubble(
          ...
        ),
      ),
    )

Right now, that works like a charm. So, can you add a "key" parameter? Thanks u!

UnimplementedError on web when running example

Running the example mentioned in pub.dev for bubble causes an UnimplementedError on web with the following stacktrace:

logs

======== Exception caught by rendering library =====================================================
UnimplementedError
The relevant error-causing widget was: 
  CustomPaint file:///C:/Users/Mehul/flutter/.pub-cache/hosted/pub.dartlang.org/bubble-1.2.1/lib/bubble.dart:92:16
====================================================================================================

======== Exception caught by rendering library =====================================================
UnimplementedError
The relevant error-causing widget was: 
  PhysicalShape file:///C:/Users/Mehul/GithubProjects/flutter_app/lib/main.dart:156:11
The following RenderObject was being processed when the exception was fired: RenderPhysicalShape#648ff relayoutBoundary=up5
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=913.0, 0.0<=h<=Infinity)
  size: Size(913.0, 40.0)
  elevation: 2.0
  color: Color(0x408bc34a)
  shadowColor: Color(0x408bc34a)
  clipper: IssueClipper
  child: RenderConstrainedBox#310d5 relayoutBoundary=up6 NEEDS-PAINT
    parentData: <none> (can use size)
    constraints: BoxConstraints(w=913.0, 0.0<=h<=Infinity)
    size: Size(913.0, 40.0)
    additionalConstraints: BoxConstraints(w=80.0, h=40.0)
RenderObject: RenderPhysicalShape#648ff relayoutBoundary=up5
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=913.0, 0.0<=h<=Infinity)
  size: Size(913.0, 40.0)
  elevation: 2.0
  color: Color(0x408bc34a)
  shadowColor: Color(0x408bc34a)
  clipper: IssueClipper
  child: RenderConstrainedBox#310d5 relayoutBoundary=up6 NEEDS-PAINT
    parentData: <none> (can use size)
    constraints: BoxConstraints(w=913.0, 0.0<=h<=Infinity)
    size: Size(913.0, 40.0)
    additionalConstraints: BoxConstraints(w=80.0, h=40.0)
====================================================================================================

======== Exception caught by rendering library =====================================================
UnimplementedError
The relevant error-causing widget was: 
  PhysicalShape file:///C:/Users/Mehul/GithubProjects/flutter_app/lib/main.dart:164:11
The following RenderObject was being processed when the exception was fired: RenderPhysicalShape#42f40 relayoutBoundary=up5
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=913.0, 0.0<=h<=Infinity)
  size: Size(913.0, 40.0)
  elevation: 2.0
  color: Color(0x408bc34a)
  shadowColor: Color(0x408bc34a)
  clipper: IssueClipper
  child: RenderConstrainedBox#4e688 relayoutBoundary=up6 NEEDS-PAINT
    parentData: <none> (can use size)
    constraints: BoxConstraints(w=913.0, 0.0<=h<=Infinity)
    size: Size(913.0, 40.0)
    additionalConstraints: BoxConstraints(w=80.0, h=40.0)
RenderObject: RenderPhysicalShape#42f40 relayoutBoundary=up5
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=913.0, 0.0<=h<=Infinity)
  size: Size(913.0, 40.0)
  elevation: 2.0
  color: Color(0x408bc34a)
  shadowColor: Color(0x408bc34a)
  clipper: IssueClipper
  child: RenderConstrainedBox#4e688 relayoutBoundary=up6 NEEDS-PAINT
    parentData: <none> (can use size)
    constraints: BoxConstraints(w=913.0, 0.0<=h<=Infinity)
    size: Size(913.0, 40.0)
    additionalConstraints: BoxConstraints(w=80.0, h=40.0)
====================================================================================================

Tested on flutter's master, dev and beta channel

Gradient bubble color?

is there any way to apply border colour to chat bubble and set nip to centerleft or centerright?

The Bubble widget gave me bad performance

When i used it in ListView.Builder the frames down to 7 fps.
I tried to change it to Container and the frames up to 40 fps.

No nip in bubble

Not possible to use a bubble with a nip.

Elevation issue

This is a great widget. Easy to use. Great examples. However, I cannot get the elevation property to render. I am building a web app. I've tried different variations of providing the value. Here is my code and results.

return Bubble(
            margin: BubbleEdges.only(top: 5),
            elevation: 10,
            shadowColor: Colors.red[900],
            alignment: item.side == UtteranceSide.user
                ? Alignment.topRight
                : Alignment.topLeft,
            nip: item.side == UtteranceSide.user
                ? BubbleNip.rightTop
                : BubbleNip.leftTop,
            color: item.side == UtteranceSide.user ? Colors.green : Colors.blue,
            child: internalWidget,
          );```

![Results image] (https://user-images.githubusercontent.com/2569582/83526542-30e70c80-a4ac-11ea-8bd5-17c22ca912e8.png)

Add null safety

It would be great to have null safety for this plugin (see migration guide).

Add one more text field for date inside bubble

can someone please add one more text field for date inside bubble

Dynamic width when text is more than 1 line.

It is ok when the text is only 1 line. But when the text is 2 lines, there is a trailing gap, which is not very beautiful.

Feature Request: BubbleNip.BelowLeft, BubbleNip.BelowRight, BubbleNip.AboveLeft, BubbleNip.AboveRight

please complete the nip variation like:

• BubbleNip.BelowLeft
• BubbleNip.BelowRight
• BubbleNip.AboveLeft
• BubbleNip.AboveRight
• BubbleNip.AboveCenter
• BubbleNip.BelowCenter

Massive reduce on performance when bubble nip is visible

            ListView.builder(
              itemCount: 1000,
              itemBuilder: (BuildContext context, int index) {
                return Bubble(
                  nip: BubbleNip.rightTop,
                  child: Text('TEST MESSAGE BODY #$index'),
                );
              },      

Flutter Web - Mobile Browser Bubble viewing problem

I can't see bubbles on my phone in flutter web application. Do you know any suggestion about it ?

[Question] Speech to text support

Is this package also supporting speech to text?

Move Nip Horizontally

Can someone create functionality to add horizontal offset of the nip?