Максимальная ширина контейнера во флаттере

Question

  Widget build(context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 300,
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: color ?? Colors.blue,
            borderRadius: BorderRadius.circular(10)
          ),
          child: msg
        )
      ],  
    );
  }

Это метод сборки моего виджета, и он отображает этот интерфейс в зависимости от того, что я передаю как msg параметра Я

1. Загрузка текста
2. Какой-то очень длинный текст

Теперь проблема, с которой я сталкиваюсь, заключается в том, что я не могу обернуть текст внутри этого контейнера / синего поля без установки его ширины, но если я установлю ширину контейнера / синего поля, он всегда будет оставаться таким широким, независимо от того, насколько короткий текст,

Есть ли способ установить maxWidth (например, 500) контейнера / синего поля? Чтобы синее поле стало настолько широким, насколько это требуется для мелкого текста, такого как "Загрузка", а для длинного текста оно расширится до ширины 500 единиц, а затем обернет текст?

Требуемый вывод для длинного текста:

Для небольшого текста, такого как загрузка, я не хочу никаких изменений в интерфейсе, но для длинного текста я хочу, чтобы это выглядело так.

Answer 1

Вы можете добавить ограничение к виджету контейнера с предпочтительным maxWidth как это:

Widget build(context) {
return Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      constraints: BoxConstraints(minWidth: 100, maxWidth: 200),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: color ?? Colors.blue,
        borderRadius: BorderRadius.circular(10)
      ),
      child: msg
    )
  ],  
);
}

Надеюсь, это поможет!

Answer 2

Использовать ConstrainedBox с участием BoxConstraints maxWidth

ConstrainedBox(
    constraints: BoxConstraints(maxWidth: 150),
    child: Container(
        color : Colors.blue,
        child: Text('Your Text here'),
    ),
)

Answer 3

Это должно быть внутри или виджет

1. Ряд

        Row(
      children: [
        Container(
            constraints: BoxConstraints(maxWidth: 300),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0)),
            child: Text("Long Text....")
        ),
      ],
    );

2. Колонка

      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
            constraints: BoxConstraints(maxWidth: 300),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0)),
            child: Text("Long Text....")
        ),
      ],
    );

Здесь в обоих примерах это работает, потому что Column а также Row разрешить дочерним элементам расширяться до заданного ограничения / размера.

Примечание. Если дочерний элемент хочет, чтобы его размер отличался от родительского, а у родительского элемента недостаточно информации для его выравнивания, размер дочернего элемента можно игнорировать.

Answer 4

Вот простой метод, который я использую для длинных текстов:

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 200),
  child: Container(
    child: Text(
      'Long string of text',
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
    ),
  ),
)

Обратите внимание maxLines атрибут, который может быть полезен, если вы хотите отобразить только одну строку текста.

Answer 5

Для меня, по крайней мере, установка ограниченного поля в IntrinsicWidth решила проблему.

      IntrinsicWidth(
  child: Container(
    constraints: BoxConstraints(maxWidth: 200),
    child: Row(
      children: [
       
      ],
    ),
  ),
);

Answer 6

Вот как я это исправил

      Center(
    child: Container(
      child: this.child,
      width: 300,
      height: double.infinity,
    ),
  )

Answer 7

Использовать Constraints собственность в Container виджет.

использовать maxWidth & minWidth значение для достижения требования.

       Container(
      constraints: BoxConstraints(minWidth: 150, maxWidth: 300),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5)),
      child: Text("")
    )

Answer 8

Может быть, использовать Flexible вокруг текста, а затем обернуть его в контейнер фиксированного размера? Просто идея.

Answer 9

В моем случае мое решение было следующим: обернуть в строку и добавить разделитель (в виджете пузыря комментариев я не определял ни ширину, ни максимальную ширину. Она растет в зависимости от текста. Чтобы ограничить ширину, добавленное дополнение к пузырю комментариев.

      return Row(
      children: [
          CommentBubble(
              chatText: snapshot.get('text'),
              sentAt: snapshot.get('sentAt'),
              sendBy: snapshot.get('sendBy'),
          ),
          Spacer(),
      ],
);

Answer 10

Я знаю, что уже поздно, но в будущем кому-то может помочь.
Я использовал плагин auto_size_text, чтобы это сделать:

AutoSizeText(
  'A really long String',
  style: TextStyle(fontSize: 30),
  minFontSize: 18,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)

Answer 11

Объедините текст с "\", он перейдет к следующей строке