Estoy tratando de lograr el siguiente resultado:

enter image description here

Es parte de un ListView.builder y si el texto es demasiado largo, se desborda en la tarjeta.

Hasta ahora, esto es lo que he intentado, pero veo un error de desbordamiento y no va a una nueva línea, se ve así:

enter image description here

Card(
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        child: Padding(
      padding: const EdgeInsets.all(14),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.min,
           children: <Widget>[
            const Icon(Icons.radio_button),
            const SizedBox(width: 8),
            Wrap(
                direction: Axis.vertical,
                children: <Widget>[
                  Text('Some text that is too long so it overflows'),
                ],
            ),
            const Text('9'),
           ],
  ),
);
0
gg11 26 jun. 2020 a las 04:56

2 respuestas

La mejor respuesta

En primer lugar, no estoy seguro del propósito de su fila que solo contiene otra fila.

Pero el widget que está buscando es un widget flexible. Como todos los demás widgets tienen un tamaño definido, el widget flexible utilizará el espacio disponible restante y envolverá el contenido adecuadamente.

Card(
    clipBehavior: Clip.antiAlias,
    shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10)),
    child: Padding(
         padding: const EdgeInsets.all(14),
         child: Row(
             children: <Widget>[
                const Icon(Icons.radio),
                const SizedBox(width: 8),
                const SizedBox(width: 8),
                Flexible(
                   child: 
                      Text(
                        'Some text that is too long so it really is too big and overflows'),),
                const Text('9'),
                  ],
                ),
              ),
            ),
0
Duncan Pullen 26 jun. 2020 a las 02:11

Ajuste el texto con Flexible y elimine la fila adicional

  Card(
         clipBehavior: Clip.antiAlias,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            child: Padding(
              padding: const EdgeInsets.all(14),
              child: Row(
                children: <Widget>[
                  Icon(Icons.radio),
                  const SizedBox(width: 8),
                  const SizedBox(width: 8),
                  Flexible(
                    child: Text(
                      'Some text that is too long so it overflows Some text that is too long so it overflows',
                      overflow: TextOverflow.fade,
                    ),
                  ),
                  Text('9'),
                ],
              ),
            ),
          ),
0
Sachin Bhankhar 26 jun. 2020 a las 02:22