A Flutter widget for chat like a speech bubble in Whatsapp

speech bubble

a flutter widget for chat like a speech bubble in whatsapp and others.

example

see sources.

usage

bubble(
  child: text('hello, world!'),
),

– nip

bubble(
  nip: bubblenip.top_right,
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  nip: bubblenip.top_left,
  child: text('hello, programmer!'),
),

– alignment

bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  child: text('hello, programmer!'),
),

– color

bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  child: text('hello, programmer!'),
),

– radius

bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  radius: 0,
  color: color.fromargb(255, 225, 255, 199),
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  radius: 10,
  color: color.fromargb(255, 225, 255, 199),
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  radius: 0,
  child: text('hello, programmer!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  radius: 10,
  child: text('hello, programmer!'),
),

– nipwidth and nipheight

bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  nipwidth: 8,
  nipheight: 20,
  color: color.fromargb(255, 225, 255, 199),
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  nipwidth: 8,
  nipheight: 20,
  child: text('hello, programmer!'),
),

bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  nipwidth: 30,
  nipheight: 12,
  color: color.fromargb(255, 225, 255, 199),
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  nipwidth: 30,
  nipheight: 12,
  child: text('hello, programmer!'),
),

– nipradius

for (var i = 0; i <= 6; i++)
  bubble(
    margin: bubbleedges.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(
    margin: bubbleedges.only(top: 4),
    alignment: alignment.topleft,
    nip: bubblenip.top_left,
    nipwidth: 30,
    nipheight: 12,
    nipradius: i.todouble(),
    child: text('hello, programmer!'),
  ),

scheme:

– nipoffset

for (var i = 0; i <= 6; i++)
  bubble(
    margin: bubbleedges.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(
    margin: bubbleedges.only(top: 4),
    alignment: alignment.topleft,
    nip: bubblenip.top_left,
    nipwidth: 30,
    nipheight: 12,
    nipradius: i.todouble(),
    nipoffset: 8,
    child: text('hello, programmer!'),
  ),

for (var i = 0; i <= 12; i += 3)
  bubble(
    margin: bubbleedges.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(
    margin: bubbleedges.only(top: 4),
    alignment: alignment.topleft,
    nip: bubblenip.top_left,
    nipoffset: i.todouble(),
    child: text('hello, programmer!'),
  ),

– shownip

add second bubble to everyone.

bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 2),
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  child: text('how are you?'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  child: text('hello, programmer!'),
),
bubble(
  margin: bubbleedges.only(top: 2),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  child: text('and how are you?'),
),

second, third et al bubbles in whatsapp haven’t nips. remove them.

bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 2),
  alignment: alignment.topright,
  //nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  child: text('how are you?'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  child: text('hello, programmer!'),
),
bubble(
  margin: bubbleedges.only(top: 2),
  alignment: alignment.topleft,
  //nip: bubblenip.top_left,
  child: text('and how are you?'),
),

it’s not that. hide nips!

bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.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(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  child: text('hello, programmer!'),
),
bubble(
  margin: bubbleedges.only(top: 2),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  shownip: false,
  child: text('and how are you?'),
),

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.topright,
        nip: bubblenip.top_right,
        color: color.fromargb(255, 225, 255, 199),
        elevation: i.todouble(),
        child: text('hello, world!'),
      ),
      bubble(
        margin: bubbleedges.only(top: 10),
        alignment: alignment.topleft,
        nip: bubblenip.top_left,
        elevation: i.todouble(),
        child: text('hello, programmer!'),
      ),
    ],
  ),

a thin shadow.

double px = 1 / mediaquery.of(context).devicepixelratio;

...
bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  elevation: 0,
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.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(
  margin: bubbleedges.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(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  elevation: 1,
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  elevation: 0,
  child: text('hello, programmer!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  elevation: 0.5 * px,
  child: text('hello, programmer!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  elevation: 1 * px,
  child: text('hello, programmer!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  elevation: 1,
  child: text('hello, programmer!'),
),

– shadowcolor

bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  elevation: 2,
  shadowcolor: colors.red,
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.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(
  margin: bubbleedges.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(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  elevation: 2,
  shadowcolor: colors.red,
  child: text('hello, programmer!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  elevation: 2,
  shadowcolor: colors.green,
  child: text('hello, programmer!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  elevation: 2,
  shadowcolor: colors.blue,
  child: text('hello, programmer!'),
),

– margin

bubble(
  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(
  margin: bubbleedges.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(
  margin: bubbleedges.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(
  margin: bubbleedges.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!'),
),

– padding

bubble(
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  padding: bubbleedges.all(2),
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  padding: bubbleedges.all(2),
  child: text('hello, programmer!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topright,
  nip: bubblenip.top_right,
  color: color.fromargb(255, 225, 255, 199),
  padding: bubbleedges.all(20),
  child: text('hello, world!'),
),
bubble(
  margin: bubbleedges.only(top: 10),
  alignment: alignment.topleft,
  nip: bubblenip.top_left,
  padding: bubbleedges.all(20),
  child: text('hello, programmer!'),
),