GithubHelp home page GithubHelp logo

vi-k / bubble Goto Github PK

View Code? Open in Web Editor NEW
265.0 3.0 56.0 3.15 MB

Speech bubble for Flutter

License: BSD 2-Clause "Simplified" License

Dart 43.83% Objective-C 0.07% Kotlin 0.22% Swift 0.73% HTML 2.71% CMake 14.36% C++ 37.31% C 0.78%

bubble's Introduction

Bubble

Pub GitHub stars

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:

Bubble

• 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 People

Contributors

arthurpiccoli avatar shinriyo avatar vi-k avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

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

image

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
normal

After submit app store
after-sumbit-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?

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

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

Simulator Screen Shot - iPhone 8 - 2020-04-17 at 11 06 00
Simulator Screen Shot - iPhone 8 - 2020-04-17 at 11 06 24

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%.

Triangle Nip

can i have the nip as a even triangle? please

image

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

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)

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.