flutter - 容器文本换行

Question

我正在尝试创建聊天气泡，并找到了一个我正在尝试修改的片段。我已经走了很远，但无法让气泡环绕文本。我确实找到了 Wrap text in container without using a fixed width in Flutter并遵循那里的想法，但它们对我不起作用。谁能提供一些见解？

图像显示了我使用下面的代码得到的结果，但如前所述，我希望气泡环绕文本而不是完全延伸到边缘，除非需要。

class Bubble extends StatelessWidget {
  Bubble(
      {this.author, this.message, this.time, this.delivered, this.isEmployee});
  final String message, time, author;
  final delivered, isEmployee;
  @override
  Widget build(BuildContext context) {
    final rowAlignment =
        isEmployee ? MainAxisAlignment.start : MainAxisAlignment.end;
    final bg =
        isEmployee ? Colors.greenAccent.shade100 : Colors.blueAccent.shade100;
    final align =
        isEmployee ? CrossAxisAlignment.start : CrossAxisAlignment.end;
    final icon = delivered ? Icons.done_all : Icons.done;
    final radius = isEmployee
        ? BorderRadius.only(
            topRight: Radius.circular(5.0),
            bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(5.0),
          )
        : BorderRadius.only(
            topLeft: Radius.circular(5.0),
            bottomLeft: Radius.circular(5.0),
            bottomRight: Radius.circular(10.0),
          );
    return Column(
      crossAxisAlignment: align,
      children: <Widget>[
        Container(
          margin: const EdgeInsets.all(3.0),
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  blurRadius: .5,
                  spreadRadius: 1.0,
                  color: Colors.black.withOpacity(.12))
            ],
            color: bg,
            borderRadius: radius,
          ),
          child: Column(
            crossAxisAlignment: align,
            children: <Widget>[
              Text(author, style: TextStyle(fontWeight: FontWeight.bold)),
              Text(message),
              Row(mainAxisAlignment: rowAlignment, children: <Widget>[
                Text(time,
                    style: TextStyle(
                      color: Colors.black38,
                      fontSize: 10.0,
                    )),
                SizedBox(width: 3.0),
                Icon(
                  icon,
                  size: 12.0,
                  color: Colors.black38,
                )
              ])
            ],
          ),
        )
      ],
    );
  }
}

Answer 1

将您的第一个 Column 包装在 FittedBox 小部件中。

FittedBox(
      fit: BoxFit.contain,
      child: Column(
       ....