Question

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

电流输出

需要输出

尝试以下代码，但未获得曲线的左上部分。是否有任何软件包或库。可用于使此类自定义形状变得扑朔迷离。

产生电流输出的代码。

谢谢。

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

良好的设计，可在抖动的基础上构建。

这是帖子，您可以结帐！

  Custom paint in flutter

Answer 2

我先尝试过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,
                  ),
                ),
              ),
            ),
          ),
        )
      ],
    );
  }
}

检查图像输出

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

2 个答案: