多行 flutter 文本字段占用了所有 Flexible space，右填充丑陋

Question

我正在 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,
                )
              ),
        ),
    );
  }

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

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

多行 - 使用所有可用的水平 space 直到右侧大小的框，右手边包装丑陋：

多行另一个（坏）例子：

所以我真正想要的是：

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

Answer 1

您在寻找 Paragraph.longestLine 属性吗？

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

多行 flutter 文本字段占用了所有 Flexible space，右填充丑陋

Multi-line flutter text field occupies all of Flexible space with ugly right padding

flutter

widget

word-wrap

multiline

horizontal-line