Размер контейнера в зависимости от его содержимого (текста)

Question

Я хочу, чтобы мой контейнер имел разный размер в зависимости от их содержимого (в данном случае текста), если один пользователь напишет более длинный текст, контейнер будет больше, а если другой пользователь напишет более короткий текст, контейнер будет меньше.

Является ли это возможным? А если нет, есть ли другой способ сделать это?

Спасибо

Это то, чего я хочу достичь (это скриншот приложения Samsung Note).

Answer 1

Вам не нужно назначать width или же height к, поэтому его размер будет изменяться в зависимости от child:

      
Container(
     color: Colors.red,
     child: const Text("Hi there111"),
)

Если вы хотите контролировать максимальную ширину и максимальную высоту, вы будете использовать Containerс constraints поле

      
Container(
      color: Colors.red,
      constraints: const BoxConstraints(
          maxWidth: 200,
      ),
      child: const Text("Hi there11122222222"),
)

И, конечно, вы можете дать это minWidth а также minHeight в BoxConstraints.

Результат, когда тебе меньше

Результат, когда у вас есть текст настолько длинный, что он выходит за границы maxWidth, в этом случае высота изменяется автоматически:

Вы также можете добавить отступ для лучшего вида:

      
Container(
    padding: EdgeInsets.all(20),
    color: Colors.red,
    constraints: const BoxConstraints(
      maxWidth: 200,
    ),
    child: const Text("Hi there11122222222222222222"),
)

Но для других типов виджетов, кроме этого, будет намного безопаснее, если вы обернете их FittedBoxвот так, обратите внимание на Textвиджет :

      
Container(
    padding: EdgeInsets.all(20),
    color: Colors.red,
    constraints: const BoxConstraints(
      maxWidth: 200,
    ),
    child: FittedBox(
       fit: BoxFit.fill,
       child: const Text("asfasfasfasfasf")
    ),

)