Flutter. Как сделать текст многострочным?

Question

Как в flutter сделать что бы текст переносился с одной строки на другую.

Я создалCard в ней Row, в нём Column, а в нём Text. В Card есть Image и если текст или изображение слишком длинные, то изображение уходит за пределы Card.

Указать размеры не получиться, так как пользователь сам вводит дату, название, и изображение.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bgColor,
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            margin: EdgeInsets.only(left: 20, right: 20, top: 5, bottom: 5),
            height: 150,
            child: Card(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
              elevation: 10,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Container(
                        margin: EdgeInsets.only(left: 15, top: 5),
                        child:
                          Text('Это дата', style: LabelTextStyle,)),
                      Container(
                        margin: EdgeInsets.only(left: 15, top: 0),
                        child:
                      Text('Это название праздника. Оно слишком длинное', style: textStyle,)),
                    ],
                  ),
                  Container(
                    padding: EdgeInsets.all(10),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child:
                        Image.network('image url')
                    )
                  )
                ],
              ),
            ) 
          );
        },
      ) 
    );
  }

Answer 1

Со Flutter'ом не работал но почти всегда помогает \n (перенос на новую строчку)

Это название праздника.\n Оно слишком длинное

Answer 2

Есть несколько способов реализовать перенос текста в Flutter. Самым удобным я считаю оборачивание в виджет Flexible (он имеет эффект только внутри виджетов Row и Column) - это обеспечит автоматические переносы:

Row(
  children: [
    /* .... */
    Flexible(
      child: Text("Какой-то очень длинный текст"),
    ),
    /* .... */
  ],
),

Ну а для контролируемого (неавтоматического) переноса, достаточно просто разбить текст на несколько виджетов, типа

Column(
  children: [
    /* .... */
    Text("Кусочек какого-то длинного текста"),
    Text("Еще один кусочек длинного текста"),
    Text("И еще один"),
    /* .... */
  ],
),

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

const text = 'Какой-то очень длинный текст';
const n = 64;  // желаемая максимальная длина подстроки
List chunks = [
  for (int i = n; i < text.length + n; i += n)
    text.substring(i - n, min(text.length, i))
];

Answer 3

Flexible(
  fit: FlexFit.loose,
  child: Text(
              'Какой-то очень длинный текст',
              overflow: TextOverflow.ellipsis,
              maxLines: 2,
              ),
  )

БЛОГ НА HUSL

Flutter. Как сделать текст многострочным?

Ответы (3 шт):