Flutter：如何在聊天消息中使这种类型冒泡？答案

【问题标题】：Flutter: How to make this type bubble in chat message?Flutter：如何在聊天消息中使这种类型冒泡？
【发布时间】：2020-02-29 18:14:50
【问题描述】：

如何让这种类型在聊天消息中冒泡？

电流输出

需要输出

尝试了下面的代码，但没有得到曲线的左上角部分。是否有任何包或库。可用于制作这种类型的自定义形状。

产生电流输出的代码。

提前致谢。

Padding(
        padding: const EdgeInsets.symmetric(vertical: 30),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Container(
                  alignment: Alignment.centerLeft,
                  height: 40,
                  width: 40,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: Colors.white, width: 3),
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: const AssetImage(
                          'assets/images/composite-corporate-group-photos.jpg'),
                    ),
                  ),
                ),
                Positioned(
                  top: 37,
                  child: Padding(
                    padding:const EdgeInsets.only(left: 3),
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 20, vertical: 8),
                      decoration: const BoxDecoration(
                        color: pinkColor,
                        shape: BoxShape.rectangle,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey,
                            blurRadius: 4.0,
                          ),
                        ],
                        borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(22.0),
                          bottomLeft: Radius.circular(22.0),
                          topRight: Radius.circular(22.0),
                        ),
                      ),
                      child: Text(
                        widget.text,
                        style: const TextStyle(
                          fontFamily: 'PoppinsRegular',
                          fontSize: 16,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      );

【问题讨论】：

使用 `CustomClipper 构建形状。
@AbhayKoradiya 我尝试了自定义剪刀，但没有得到精确的数学来获得那个形状

标签： flutter dart flutter-layout

【解决方案1】：

我首先尝试过CustomPainter。但由于一些数学问题而无法成功。

终于用BoxDecoration成功了。不知道我的解决方案是好是坏。但是

如果有人有其他最佳方法，请告诉我。

class MyWidget extends StatefulWidget {
  double width = 0, height = 60;

  MyWidget({this.width, this.height});

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  void initState() {
    super.initState();
    if (widget.width == 0) {
      widget.width = MediaQuery.of(context).size.width;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: widget.height,
          width: widget.width,
          color: colorPink,
          child: Material(
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(widget.height / 2),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Container(
                  width: widget.height,
                  height: widget.height,
                  decoration: new BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                      image: ExactAssetImage('images/pokemon/u83.jpg'),
                      fit: BoxFit.cover,
                    ),
                    border: new Border.all(
                      color: Colors.white,
                      width: 4.0,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        Container(
          height: widget.height,
          width: widget.width,
          child: Material(
            color: colorPink,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(widget.height / 3),
              bottomRight: Radius.circular(widget.height / 3),
              topRight: Radius.circular(widget.height / 3),
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 20.0),
              child: Container(
                alignment: Alignment.centerLeft,
                child: Text(
                  "Some text here....",
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 15.0,
                  ),
                ),
              ),
            ),
          ),
        )
      ],
    );
  }
}

检查图像输出

【讨论】：

【解决方案2】：

基于 Flutter 的良好设计。

这是帖子，你可以结帐！

 Custom paint in flutter

【讨论】：