多行颤动文本字段占用所有灵活空间，右填充丑陋

如何解决多行颤动文本字段占用所有灵活空间，右填充丑陋

我正在 Flutter 应用程序中构建聊天气泡，这激发了我内心的完美主义者。显示来自另一个聊天用户的传入消息的主要代码是：

  Widget getOtherUserMessageRow() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
        message.cm.senderIsSameAsPreviousOnSameDay(AppState.i.activeUserId)
          ? SizedBox(width: AppState.i.chatItemOtherUserLeftInset)  // If sender is previous message sender on same day,don't repeat avatar
          : message.getCreatorAvatar(),SizedBox(width: AppState.i.chatItemOtherUserAvatarRightPadding),// Leave fixed gap for other messages
        Flexible(
          fit: FlexFit.loose,child: message.cm.messageType.getMessageWidget(message),),SizedBox(width: AppState.i.chatItemOtherUserMessageRightPadding),// Fixed gap for non-user messages
      ],);
  }

然后我们有创建气泡的代码，通过 message.cm.messageType.getMessageWidget(message) 间接调用：

  Widget build(BuildContext context) {
    bool isFromAppUser = message.cm.isFromAppUser(AppState.i.activeUserId);

    return Container(
      padding: EdgeInsets.symmetric(
        vertical: AppState.i.chatItemMessageVerticalInset),child:
      Container(
        decoration: BoxDecoration(
          color: isFromAppUser ? AppState.i.chatItemUserMessageBackgroundColour : Colors.white,borderRadius: BorderRadius.only(
            topLeft: Radius.circular(isFromAppUser ? AppState.i.chatItemMessageBorderRadius : 0),topRight: Radius.circular(isFromAppUser ? 0 : AppState.i.chatItemMessageBorderRadius),bottomRight: Radius.circular(isFromAppUser ? AppState.i.chatItemMessageCurvedBorderRadius : AppState.i.chatItemMessageBorderRadius),bottomLeft: Radius.circular(isFromAppUser ? AppState.i.chatItemMessageBorderRadius : AppState.i.chatItemMessageCurvedBorderRadius),boxShadow: [
                BoxShadow(
                  color: AppState.i.chatItemMessageBoxShadowColour,spreadRadius: AppState.i.chatItemMessageBoxShadowSpreadRadius,blurRadius: AppState.i.chatItemMessageBoxShadowBlurRadius,offset: AppState.i.chatItemMessageBoxShadowOffset,// changes position of shadow
                ),],padding: EdgeInsets.symmetric(
            vertical: AppState.i.chatItemMessageVerInset,horizontal: AppState.i.chatItemMessageHorInset),child: Text(
                message.cm.messageText,style: TextStyle(
                  fontSize: AppState.i.chatItemMessageTextFontSize,color:
                      isFromAppUser ? AppState.i.chatItemMessageUserTextFontColour : AppState.i.chatItemMessageOtherUserTextFontColour,)
              ),);
  }

所以我得到的是这个......

单行 - 工作正常不使用所有水平空间。

多行 - 使用所有可用的水平空间，直到右侧的大小框，并带有丑陋的右侧环绕：

多行另一个（坏的）例子：

所以我真正想要的是：

有什么想法吗？我有点认为这是不可能的，因为 TextField 必须根据它的内部包装智能地调整水平适合度。但我愿意被你的布局大师证明不然:-)

解决方法

您在寻找 Paragraph.longestLine 房产吗？

Text(
  textWidthBasis: TextWidthBasis.longestLine,...
)