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

2024-05-04 • 问答

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

电流输出

需要输出

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

产生电流输出的代码。

谢谢。

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

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

这是帖子，您可以结帐！

  Custom paint in flutter

我先尝试过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,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：如何使这种类型的气泡出现在聊天消息中？

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

大家都在问