作者热门文章
- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
我正在尝试通过克隆 WhatsApp 来学习 Flutter。我在 WhatsApp 中以气泡格式显示消息时遇到了问题。
我尝试查看 Google 的教程,但他们的信使教程只使用直行。
谁能指出我正确的方向?
谢谢!
最佳答案
import 'package:flutter/material.dart';
class Bubble extends StatelessWidget {
Bubble({this.message, this.time, this.delivered, this.isMe});
final String message, time;
final delivered, isMe;
@override
Widget build(BuildContext context) {
final bg = isMe ? Colors.white : Colors.greenAccent.shade100;
final align = isMe ? CrossAxisAlignment.start : CrossAxisAlignment.end;
final icon = delivered ? Icons.done_all : Icons.done;
final radius = isMe
? BorderRadius.only(
topRight: Radius.circular(5.0),
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(5.0),
)
: BorderRadius.only(
topLeft: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(10.0),
);
return Column(
crossAxisAlignment: align,
children: <Widget>[
Container(
margin: const EdgeInsets.all(3.0),
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: .5,
spreadRadius: 1.0,
color: Colors.black.withOpacity(.12))
],
color: bg,
borderRadius: radius,
),
child: Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 48.0),
child: Text(message),
),
Positioned(
bottom: 0.0,
right: 0.0,
child: Row(
children: <Widget>[
Text(time,
style: TextStyle(
color: Colors.black38,
fontSize: 10.0,
)),
SizedBox(width: 3.0),
Icon(
icon,
size: 12.0,
color: Colors.black38,
)
],
),
)
],
),
)
],
);
}
}
class BubbleScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey.shade50,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: .9,
title: Text(
'Putra',
style: TextStyle(color: Colors.green),
),
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.green,
),
onPressed: () {},
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.videocam,
color: Colors.green,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.call,
color: Colors.green,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.more_vert,
color: Colors.green,
),
onPressed: () {},
)
],
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Bubble(
message: 'Hi there, this is a message',
time: '12:00',
delivered: true,
isMe: false,
),
Bubble(
message: 'Whatsapp like bubble talk',
time: '12:01',
delivered: true,
isMe: false,
),
Bubble(
message: 'Nice one, Flutter is awesome',
time: '12:00',
delivered: true,
isMe: true,
),
Bubble(
message: 'I\'ve told you so dude!',
time: '12:00',
delivered: true,
isMe: false,
),
],
),
),
);
}
}
关于android - 如何在 Flutter 中为文本创建气泡? (WhatsApp 用户界面),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49098856/
我是一名优秀的程序员,十分优秀!