zoukankan      html  css  js  c++  java
  • [Flutter] Style a message chat style-ish bubble

    const kOtherBubblePointer = BorderRadius.only(
      topRight: Radius.circular(30),
      bottomLeft: Radius.circular(30),
      bottomRight: Radius.circular(30),
    );
    
    const kMeBubblePointer = BorderRadius.only(
      topLeft: Radius.circular(30),
      bottomLeft: Radius.circular(30),
      bottomRight: Radius.circular(30),
    );
    class MessageBubble extends StatelessWidget {
      MessageBubble({this.sender, this.text, this.isMe});
    
      final String text;
      final String sender;
      final bool isMe;
    
      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: EdgeInsets.all(10.0),
          child: Column(
            crossAxisAlignment:
                isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                sender,
                style: TextStyle(fontSize: 12, color: Colors.black45),
              ),
              Material(
                borderRadius: isMe ? kMeBubblePointer : kOtherBubblePointer,
                elevation: 5,
                color: isMe ? Colors.lightBlueAccent : Colors.white,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  child: Text(
                    '$text',
                    style: TextStyle(
                      fontSize: 15.0,
                      color: isMe ? Colors.white : Colors.black54,
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }

  • 相关阅读:
    MySQL用户管理
    MySQL函数
    MySQL数据类型
    MySQL配置
    PowerDesigner之PDM检查
    PowerDesigner之PDM(物理概念模型)
    .NET Reflector反编译的方法
    IBatis.net 输出SQL语句(七)
    SVN 记录冲突、忽略
    SQLServer 窗口函数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11870389.html
Copyright © 2011-2022 走看看