Speech bubble for Flutter

admin

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

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(
  nip: BubbleNip.rightTop,
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.leftTop,
  child: Text('Hello, programmer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.rightBottom,
  nipRadius: 0,
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  nip: BubbleNip.leftBottom,
  nipRadius: 0,
  child: Text('Hello, programmer!'),
),

Bubble

• alignment

Bubble(
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  child: Text('Hello, programmer!'),
),

Bubble

• color

Bubble(
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  child: Text('Hello, programmer!'),
),

Bubble

• radius

Bubble(
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  radius: 0,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  radius: 10,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  radius: 0,
  child: Text('Hello, programmer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  radius: 10,
  child: Text('Hello, programmer!'),
),

Bubble

• nipWidth and nipHeight

Bubble(
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  nipWidth: 8,
  nipHeight: 20,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  nipWidth: 8,
  nipHeight: 20,
  child: Text('Hello, programmer!'),
),

Bubble

Bubble(
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  nipWidth: 30,
  nipHeight: 12,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  nipWidth: 30,
  nipHeight: 12,
  child: Text('Hello, programmer!'),
),

Bubble

• nipRadius

for (var i = 0; i <= 6; i++)
  Bubble(
    margin: BubbleEdges.only(top: 4),
    alignment: Alignment.rightTop,
    nip: BubbleNip.rightTop,
    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(
    margin: BubbleEdges.only(top: 4),
    alignment: Alignment.leftTop,
    nip: BubbleNip.leftTop,
    nipWidth: 30,
    nipHeight: 12,
    nipRadius: i.toDouble(),
    child: Text('Hello, programmer!'),
  ),

Bubble

Scheme:

Bubble

• stick

for (var i = 0; i <= 6; i++)
  Bubble(
    margin: BubbleEdges.only(top: 4),
    alignment: Alignment.rightTop,
    nip: BubbleNip.rightTop,
    nipWidth: 30,
    nipHeight: 12,
    nipRadius: i.toDouble(),
    color: Color.fromARGB(255, 225, 255, 199),
    stick: true,
    child: Text('Hello, world!'),
  ),
for (var i = 0; i <= 6; i++)
  Bubble(
    margin: BubbleEdges.only(top: 4),
    alignment: Alignment.leftTop,
    nip: BubbleNip.leftTop,
    nipWidth: 30,
    nipHeight: 12,
    nipRadius: i.toDouble(),
    stick: true,
    child: Text('Hello, programmer!'),
  ),

Bubble

• nipOffset

for (var i = 0; i <= 6; i++)
  Bubble(
    margin: BubbleEdges.only(top: 4),
    alignment: Alignment.rightTop,
    nip: BubbleNip.rightTop,
    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(
    margin: BubbleEdges.only(top: 4),
    alignment: Alignment.leftTop,
    nip: BubbleNip.leftTop,
    nipWidth: 30,
    nipHeight: 12,
    nipRadius: i.toDouble(),
    nipOffset: 8,
    child: Text('Hello, programmer!'),
  ),

Bubble

for (var i = 0; i <= 12; i += 3)
  Bubble(
    margin: BubbleEdges.only(top: 4),
    alignment: Alignment.rightTop,
    nip: BubbleNip.rightTop,
    nipOffset: i.toDouble(),
    color: Color.fromARGB(255, 225, 255, 199),
    child: Text('Hello, world!'),
  ),
for (var i = 0; i <= 12; i += 3)
  Bubble(
    margin: BubbleEdges.only(top: 4),
    alignment: Alignment.leftTop,
    nip: BubbleNip.leftTop,
    nipOffset: i.toDouble(),
    child: Text('Hello, programmer!'),
  ),

Bubble

• showNip

Add second bubble to everyone.

Bubble(
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 2),
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('How are you?'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  child: Text('Hello, programmer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 2),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  child: Text('And how are you?'),
),

Bubble

Second, third et al bubbles in WhatsApp haven’t nips. Remove them.

Bubble(
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 2),
  alignment: Alignment.rightTop,
  nip: BubbleNip.no,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('How are you?'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  child: Text('Hello, programmer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 2),
  alignment: Alignment.leftTop,
  nip: BubbleNip.no,
  child: Text('And how are you?'),
),

Bubble

It’s not that. Hide nips!

Bubble(
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('Hello, world!'),
),
Bubble(
  margin: BubbleEdges.only(top: 2),
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  showNip: false,
  color: Color.fromARGB(255, 225, 255, 199),
  child: Text('How are you?'),
),
Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  child: Text('Hello, programmer!'),
),
Bubble(
  margin: BubbleEdges.only(top: 2),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  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(
        margin: BubbleEdges.only(top: 10),
        alignment: Alignment.rightTop,
        nip: BubbleNip.rightTop,
        color: Color.fromARGB(255, 225, 255, 199),
        elevation: i.toDouble(),
        child: Text('Hello, world!'),
      ),
      Bubble(
        margin: BubbleEdges.only(top: 10),
        alignment: Alignment.leftTop,
        nip: BubbleNip.leftTop,
        elevation: i.toDouble(),
        child: Text('Hello, programmer!'),
      ),
    ],
  ),

Bubble

A thin shadow.

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

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

Bubble

• shadowColor

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

Bubble

• margin

Bubble(
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  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(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  child: Text('Hello, programmer! Hello, programmer! Hello, programmer! Hello, programmer! '
    'Hello, programmer! Hello, programmer! Hello, programmer! Hello, programmer!'),
),

Bubble

Bubble(
  margin: BubbleEdges.only(left: 50),
  alignment: Alignment.rightTop,
  nip: BubbleNip.rightTop,
  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(
  margin: BubbleEdges.only(top: 10, right: 50),
  alignment: Alignment.leftTop,
  nip: BubbleNip.leftTop,
  child: Text('Hello, programmer! Hello, programmer! Hello, programmer! Hello, programmer! '
    'Hello, programmer! Hello, programmer! Hello, programmer! Hello, programmer!'),
),

Bubble

• padding

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

Bubble

Source Credit Url : https://github.com/vi-k/bubble

Leave a Comment

© 2024 Flutter App Dev