bubble 1.1.8+2 bubble: ^1.1.8+2 copied to clipboard
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!'),
),
• 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,
child: Text('Hello, world!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
nip: BubbleNip.leftBottom,
child: Text('Hello, programmer!'),
),
• alignment #
Bubble(
alignment: Alignment.topRight,
nip: BubbleNip.rightTop,
child: Text('Hello, world!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
child: Text('Hello, programmer!'),
),
• color #
Bubble(
alignment: Alignment.topRight,
nip: BubbleNip.rightTop,
color: Color.fromARGB(255, 225, 255, 199),
child: Text('Hello, world!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
child: Text('Hello, programmer!'),
),
• radius #
Bubble(
alignment: Alignment.topRight,
nip: BubbleNip.rightTop,
radius: 0,
color: Color.fromARGB(255, 225, 255, 199),
child: Text('Hello, world!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topRight,
nip: BubbleNip.rightTop,
radius: 10,
color: Color.fromARGB(255, 225, 255, 199),
child: Text('Hello, world!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
radius: 0,
child: Text('Hello, programmer!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
radius: 10,
child: Text('Hello, programmer!'),
),
• nipWidth and nipHeight #
Bubble(
alignment: Alignment.topRight,
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.topLeft,
nip: BubbleNip.leftTop,
nipWidth: 8,
nipHeight: 20,
child: Text('Hello, programmer!'),
),
Bubble(
alignment: Alignment.topRight,
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.topLeft,
nip: BubbleNip.leftTop,
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.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.topLeft,
nip: BubbleNip.leftTop,
nipWidth: 30,
nipHeight: 12,
nipRadius: i.toDouble(),
child: Text('Hello, programmer!'),
),
Scheme:
• stick #
for (var i = 0; i <= 6; i++)
Bubble(
margin: BubbleEdges.only(top: 4),
alignment: Alignment.topRight,
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.topLeft,
nip: BubbleNip.leftTop,
nipWidth: 30,
nipHeight: 12,
nipRadius: i.toDouble(),
stick: true,
child: Text('Hello, programmer!'),
),
• nipOffset #
for (var i = 0; i <= 6; i++)
Bubble(
margin: BubbleEdges.only(top: 4),
alignment: Alignment.topRight,
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.topLeft,
nip: BubbleNip.leftTop,
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.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.topLeft,
nip: BubbleNip.leftTop,
nipOffset: i.toDouble(),
child: Text('Hello, programmer!'),
),
• showNip #
Add second bubble to everyone.
Bubble(
alignment: Alignment.topRight,
nip: BubbleNip.rightTop,
color: Color.fromARGB(255, 225, 255, 199),
child: Text('Hello, world!'),
),
Bubble(
margin: BubbleEdges.only(top: 2),
alignment: Alignment.topRight,
nip: BubbleNip.rightTop,
color: Color.fromARGB(255, 225, 255, 199),
child: Text('How are you?'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
child: Text('Hello, programmer!'),
),
Bubble(
margin: BubbleEdges.only(top: 2),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
child: Text('And how are you?'),
),
Second, third et al bubbles in WhatsApp haven't nips. Remove them.
Bubble(
alignment: Alignment.topRight,
nip: BubbleNip.rightTop,
color: Color.fromARGB(255, 225, 255, 199),
child: Text('Hello, world!'),
),
Bubble(
margin: BubbleEdges.only(top: 2),
alignment: Alignment.topRight,
nip: BubbleNip.no,
color: Color.fromARGB(255, 225, 255, 199),
child: Text('How are you?'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
child: Text('Hello, programmer!'),
),
Bubble(
margin: BubbleEdges.only(top: 2),
alignment: Alignment.topLeft,
nip: BubbleNip.no,
child: Text('And how are you?'),
),
It's not that. Hide nips!
Bubble(
alignment: Alignment.topRight,
nip: BubbleNip.rightTop,
color: Color.fromARGB(255, 225, 255, 199),
child: Text('Hello, world!'),
),
Bubble(
margin: BubbleEdges.only(top: 2),
alignment: Alignment.topRight,
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.topLeft,
nip: BubbleNip.leftTop,
child: Text('Hello, programmer!'),
),
Bubble(
margin: BubbleEdges.only(top: 2),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
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.rightTop,
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.leftTop,
elevation: i.toDouble(),
child: Text('Hello, programmer!'),
),
],
),
A thin shadow.
double px = 1 / MediaQuery.of(context).devicePixelRatio;
...
Bubble(
alignment: Alignment.topRight,
nip: BubbleNip.rightTop,
color: Color.fromARGB(255, 225, 255, 199),
elevation: 0,
child: Text('Hello, world!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topRight,
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.topRight,
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.topRight,
nip: BubbleNip.rightTop,
color: Color.fromARGB(255, 225, 255, 199),
elevation: 1,
child: Text('Hello, world!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
elevation: 0,
child: Text('Hello, programmer!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
elevation: 0.5 * px,
child: Text('Hello, programmer!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
elevation: 1 * px,
child: Text('Hello, programmer!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
elevation: 1,
child: Text('Hello, programmer!'),
),
• shadowColor #
Bubble(
alignment: Alignment.topRight,
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.topRight,
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.topRight,
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.topLeft,
nip: BubbleNip.leftTop,
elevation: 2,
shadowColor: Colors.red,
child: Text('Hello, programmer!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
elevation: 2,
shadowColor: Colors.green,
child: Text('Hello, programmer!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
elevation: 2,
shadowColor: Colors.blue,
child: Text('Hello, programmer!'),
),
• margin #
Bubble(
alignment: Alignment.topRight,
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.topLeft,
nip: BubbleNip.leftTop,
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.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.topLeft,
nip: BubbleNip.leftTop,
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.rightTop,
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.leftTop,
padding: BubbleEdges.all(2),
child: Text('Hello, programmer!'),
),
Bubble(
margin: BubbleEdges.only(top: 10),
alignment: Alignment.topRight,
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.topLeft,
nip: BubbleNip.leftTop,
padding: BubbleEdges.all(20),
child: Text('Hello, programmer!'),
),