flutter怎么实现消息页面发送消息气泡
时间: 2023-11-09 15:04:14 浏览: 97
使用气泡效果来实现手机发短信的功能
3星 · 编辑精心推荐
在 Flutter 中,可以使用 `Container` 和 `Row` 组件来创建消息气泡。下面是一个简单的示例:
```dart
Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 16),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Hello, World!",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
SizedBox(width: 5),
Icon(
Icons.check,
color: Colors.white,
size: 16,
),
],
),
)
```
在这个示例中,我们使用了 `Container` 组件来创建一个圆角矩形的消息气泡,并设置了背景色为蓝色。然后,在 `Container` 组件中使用了 `Row` 组件来放置消息文本和状态图标。我们还使用了 `SizedBox` 组件来在文本和图标之间添加一些间距。
你可以根据自己的需求更改消息气泡的样式和布局。
阅读全文