bubble 1.1.6 copy "bubble: ^1.1.6" to clipboard
bubble: ^1.1.6 copied to clipboard

Published 6 years ago • verified publisheryet-another.devDart 3 incompatible• Latest: 1.2.1
outdated
→

Metadata

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

More...

Bubble #

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

Example #

See sources.

Usage #

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

Bubble

nip #

Bubble(
  style: BubbleStyle(
    nip: BubbleNip.TOP_RIGHT,
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    nip: BubbleNip.TOP_LEFT,
  ),
  child: Text('Hello, programmer!'),
),

Bubble

alignment #

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
  ),
  child: Text('Hello, programmer!'),
),

Bubble

color #

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
  ),
  child: Text('Hello, programmer!'),
),

Bubble

radius #

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    radius: 0,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    radius: 10,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    radius: 0,
  ),
  child: Text('Hello, programmer!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    radius: 10,
  ),
  child: Text('Hello, programmer!'),
),

Bubble

nipWidth and nipHeight #

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    nipWidth: 8,
    nipHeight: 20,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    nipWidth: 8,
    nipHeight: 20,
  ),
  child: Text('Hello, programmer!'),
),

Bubble

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    nipWidth: 30,
    nipHeight: 12,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    nipWidth: 30,
    nipHeight: 12,
  ),
  child: Text('Hello, programmer!'),
),

Bubble

nipRadius #

for (var i = 0; i <= 6; i++)
  Bubble(
    style: BubbleStyle(
      margin: EdgeInsets.only(top: 4),
      alignment: Alignment.topRight,
      nip: BubbleNip.TOP_RIGHT,
      nipWidth: 30,
      nipHeight: 12,
      nipRadius: i.toDouble(),
      color: Color.fromARGB(255, 225, 255, 199),
    ),
    child: Text('Hello, world!'),
  ),
for (var i = 0; i <= 6; i++)
  Bubble(
    style: BubbleStyle(
      margin: EdgeInsets.only(top: 4),
      alignment: Alignment.topLeft,
      nip: BubbleNip.TOP_LEFT,
      nipWidth: 30,
      nipHeight: 12,
      nipRadius: i.toDouble(),
    ),
    child: Text('Hello, programmer!'),
  ),

Bubble

Scheme:

Bubble

nipOffset #

for (var i = 0; i <= 6; i++)
  Bubble(
    style: BubbleStyle(
      margin: EdgeInsets.only(top: 4),
      alignment: Alignment.topRight,
      nip: BubbleNip.TOP_RIGHT,
      nipWidth: 30,
      nipHeight: 12,
      nipRadius: i.toDouble(),
      nipOffset: 8,
      color: Color.fromARGB(255, 225, 255, 199),
    ),
    child: Text('Hello, world!'),
  ),
for (var i = 0; i <= 6; i++)
  Bubble(
    style: BubbleStyle(
      margin: EdgeInsets.only(top: 4),
      alignment: Alignment.topLeft,
      nip: BubbleNip.TOP_LEFT,
      nipWidth: 30,
      nipHeight: 12,
      nipRadius: i.toDouble(),
      nipOffset: 8,
    ),
    child: Text('Hello, programmer!'),
  ),

Bubble

for (var i = 0; i <= 12; i += 3)
  Bubble(
    style: BubbleStyle(
      margin: EdgeInsets.only(top: 4),
      alignment: Alignment.topRight,
      nip: BubbleNip.TOP_RIGHT,
      nipOffset: i.toDouble(),
      color: Color.fromARGB(255, 225, 255, 199),
    ),
    child: Text('Hello, world!'),
  ),
for (var i = 0; i <= 12; i += 3)
  Bubble(
    style: BubbleStyle(
      margin: EdgeInsets.only(top: 4),
      alignment: Alignment.topLeft,
      nip: BubbleNip.TOP_LEFT,
      nipOffset: i.toDouble(),
    ),
    child: Text('Hello, programmer!'),
  ),

Bubble

showNip #

Add second bubble to everyone.

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 2),
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('How are you?'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
  ),
  child: Text('Hello, programmer!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 2),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
  ),
  child: Text('And how are you?'),
),

Bubble

Badly :((

Remove nips!

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 2),
    alignment: Alignment.topRight,
    //nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('How are you?'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
  ),
  child: Text('Hello, programmer!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 2),
    alignment: Alignment.topLeft,
    //nip: BubbleNip.TOP_LEFT,
  ),
  child: Text('And how are you?'),
),

Bubble

Badly too :((

Hide nips!

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 2),
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    showNip: false,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('How are you?'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
  ),
  child: Text('Hello, programmer!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 2),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    showNip: false,
  ),
  child: Text('And how are you?'),
),

Bubble

It's ok :)

elevation #

A thick shadow.

for (var i = 1; i <= 8; i *= 2)
  Column(
    children: <Widget>[
      Bubble(
        style: BubbleStyle(
          margin: EdgeInsets.only(top: 10),
          alignment: Alignment.topRight,
          nip: BubbleNip.TOP_RIGHT,
          color: Color.fromARGB(255, 225, 255, 199),
          elevation: i.toDouble(),
        ),
        child: Text('Hello, world!'),
      ),
      Bubble(
        style: BubbleStyle(
          margin: EdgeInsets.only(top: 10),
          alignment: Alignment.topLeft,
          nip: BubbleNip.TOP_LEFT,
          elevation: i.toDouble(),
        ),
        child: Text('Hello, programmer!'),
      ),
    ],
  ),

Bubble

A thin shadow.

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

...
Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
    elevation: 0,
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
    elevation: 0.5 * px,
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
    elevation: 1 * px,
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
    elevation: 1,
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    elevation: 0,
  ),
  child: Text('Hello, programmer!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    elevation: 0.5 * px,
  ),
  child: Text('Hello, programmer!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    elevation: 1 * px,
  ),
  child: Text('Hello, programmer!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    elevation: 1,
  ),
  child: Text('Hello, programmer!'),
),

Bubble

shadowCOlor #

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
    elevation: 2,
    shadowColor: Colors.red,
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
    elevation: 2,
    shadowColor: Colors.green,
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
    elevation: 2,
    shadowColor: Colors.blue,
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    elevation: 2,
    shadowColor: Colors.red,
  ),
  child: Text('Hello, programmer!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    elevation: 2,
    shadowColor: Colors.green,
  ),
  child: Text('Hello, programmer!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    elevation: 2,
    shadowColor: Colors.blue,
  ),
  child: Text('Hello, programmer!'),
),

Bubble

margin #

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world!'
    'Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
  ),
  child: Text('Hello, programmer! Hello, programmer! Hello, programmer! Hello, programmer! '
    'Hello, programmer! Hello, programmer! Hello, programmer! Hello, programmer!'),
),

Bubble

Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(left: 50),
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
  ),
  child: Text('Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world!'
    'Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10, right: 50),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
  ),
  child: Text('Hello, programmer! Hello, programmer! Hello, programmer! Hello, programmer! '
    'Hello, programmer! Hello, programmer! Hello, programmer! Hello, programmer!'),
),

Bubble

padding #

Bubble(
  style: BubbleStyle(
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
    padding: EdgeInsets.all(2),
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    padding: EdgeInsets.all(2),
  ),
  child: Text('Hello, programmer!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topRight,
    nip: BubbleNip.TOP_RIGHT,
    color: Color.fromARGB(255, 225, 255, 199),
    padding: EdgeInsets.all(20),
  ),
  child: Text('Hello, world!'),
),
Bubble(
  style: BubbleStyle(
    margin: EdgeInsets.only(top: 10),
    alignment: Alignment.topLeft,
    nip: BubbleNip.TOP_LEFT,
    padding: EdgeInsets.all(20),
  ),
  child: Text('Hello, programmer!'),
),

Bubble

← Metadata

603
likes
0
points
15.5k
downloads

Publisher

verified publisheryet-another.dev

Weekly Downloads

Metadata

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

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter

More

Packages that depend on bubble

Back