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,
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }

  • 相关阅读:
    typedef用法小结
    14种排序
    常用google产品
    去重排序
    双向链表
    IDEA上传一个项目到github
    IDEA上传一个项目到github
    Git的安装
    Hibernate 加载策略得总结
    hadoop -- fsck
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11870389.html
Copyright © 2011-2022 走看看