一个 Flutter 小部件，用于像 WhatsApp 中的语音气泡一样进行聊天

气泡

一个 Flutter 小部件，用于像 WhatsApp 等应用中的语音气泡一样进行聊天。

示例

请参阅源代码。

用法

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

- 尖角

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

- 对齐

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!'),
),

- 颜色

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!'),
),

- 圆角半径

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!'),
),

- 尖角宽度和尖角高度

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!'),
),

- 尖角半径

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!'),
  ),

方案

- 尖角偏移

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!'),
  ),

- 显示尖角

为所有人添加第二个气泡。

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?'),
),

WhatsApp 中的第二个、第三个等气泡没有尖角。请移除它们。

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?'),
),

不是那个。隐藏尖角！

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?'),
),

没关系 :)

- 阴影

一个厚重的阴影。

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!'),
      ),
    ],
  ),

一个浅浅的阴影。

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!'),
),

- 阴影颜色

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!'),
),

- 外边距

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!'),
),

- 内边距

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!'),
),

GitHub

https://github.com/vi-k/bubble