Flutter：如何使这种类型的聊天消息中出现气泡？

Question

如何使这种类型的聊天消息中出现气泡？

当前Output

需要 Output

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

生成当前 output 的代码。

提前致谢。

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

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

检查图像 Output

Answer 2

基于 flutter 的良好设计。

这是帖子，你可以结帐！

  Custom paint in flutter